css - 如何在水平滚动条的末尾修复一个 div？

Question

我有一个滚动条，我在开头(第一个元素之前)和结尾(最后一个元素之后)添加空间来模拟边距。

我正在尝试在上述间距中添加淡入淡出效果。请注意，我可以简单地使用填充，这样就看不到溢出滚动条的元素。但我的目标恰恰是让它们溢出，只是具有平滑的淡入淡出效果，以改善页面内部滚动条的外观。

问题是，目前，我的淡入淡出效果会随着滚动条中的元素移动(我将它们设为红色以使其更加明显)(见下文)。

但是我希望它们与滚动条保持固定，这样它们就可以覆盖超出滚动条内部空间的元素。

编辑:此外，我宁愿避免引入更多的 html 元素。

感谢您的帮助。

.scroller::before {
  left: 0;
  transform: rotate(180deg);
}

.scroller::after {
  right: 0;  
}

.scroller::before,
.scroller::after {
  content: "";
  position: absolute;
  width: 100px;
  height: 100%;
  background-image: linear-gradient(to left, red 50%, transparent); /*     I set it red for the demo */
}

.scroller {
  position: relative;
  width: 100%;
  max-width: 1000px; /* for demonstration purpose, limit the size of scroller so that it scrolls with 5 cards inside */
  height: 230px;
  overflow-x: auto;
  overflow-y: hidden;
  background-color: #DEDEDE;

  display: flex;
}

.scroller > :first-child {
  margin-left: 100px !important; /* yeah... */
}

.scroller > :last-child {
  position: relative;
}

.scroller > :last-child::after {
  content: "";
  position: absolute;
  right: -100px;
  width: 1px;
  height: 1px;
  visibility: hidden;
}

.scroller > .card {
  flex-shrink: 0;

  width: 260px;
  height: calc(100% - 2 * 15px);
  margin: 15px;
  background-color: white;
}

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  background-color: #323235;
}

<div class="scroller">
  <div class="card"></div>
  <div class="card"></div>
  <div class="card"></div>
  <div class="card"></div>
  <div class="card"></div>
</div>

Answer 1

不知道您是否可以这样做，但为什么不在您的卡片和滚动条之间添加一个元素(如 div)。这个容器将是真正的滚动条，它的父容器容器将设置滚动条显示样式(及其淡入淡出效果)。

实际上，目前，您的 :before 和 :after 伪元素被视为其他滚动条的子元素(.card 项)，所以他们也滚动。通过创建另一个级别的容器来承载滚动条之外的那些伪元素，您将能够在此滚动条之上构建固定样式。

/* These 2 first rules are my main concern */
.container::before {
  left: 0;
  /* this attribute in particular */
  background-image: linear-gradient(to right, red, transparent); /*     I set it red for the demo */
}

.container::after {
  right: 0;
  /* this attribute in particular */
  background-image: linear-gradient(to left, red, transparent); /*     I set it red for the demo */
}

.container::before,
.container::after {
  content: "";
  position: absolute;
  width: 60px;
  height: 100%;
  z-index: 99
}

/* Next is the necessary set up */

.scroller {
  position: relative;
  height: 100%;
  width: 100%;
  display: flex;
  overflow-x: auto;
}

.container{
  position: relative;
  width: 100%;
  max-width: 1000px; /* for demonstration purpose, limit the size of scroller so that it scrolls with 5 cards inside */
  height: 230px;
  overflow: hidden;
  background-color: #DEDEDE;
  display: flex;
}

.scroller > :first-child {
  margin-left: 60px !important; /* yeah... */
}

.scroller-end {
  flex-shrink: 0;
  width: 60px;
  height: 100%;
  visibility: hidden;
}

.scroller > .card {
  flex-shrink: 0;

  width: 260px;
  height: calc(100% - 2 * 15px);
  margin: 15px;
  background-color: white;
}

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  background-color: #323235;
}

<div class="container">
  <div class="scroller">
    <div class="card"></div>
    <div class="card"></div>
    <div class="card"></div>
    <div class="card"></div>
    <div class="card"></div>
    <div class="scroller-end"></div>
  </div>
</div>