如何在水平滚动条的末尾修复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>