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