修复显示中的背景线性颜色：flex 溢出滚动内容 - CSS

Question

我有一个可滚动滑块，我已将背景线性效果放入制作::after它的父标签中overflow:scroll，但是当我向左滚动时，背景颜色随内容移动。我希望它固定在正确的位置。让我展示示例代码：

.coursesSection--slider {

  display: flex;

  overflow: auto;

  position: relative;

}

.coursesSection--slider::after {

  content: '';

  background-image: linear-gradient(to right, transparent 95%, #fff 100%);

  width: 100%;

  height: 100%;

  position: absolute;

  right: 0;

  top: 0;

}

.courseCard {

  flex: 0 0 auto;

  width: 100px;

  height: 100px;

  background-color: red;

  margin-right: 10px;

}

<div class="coursesSection--slider">

  <div class="courseCard"></div>

  <div class="courseCard"></div>

  <div class="courseCard"></div>

  <div class="courseCard"></div>

  <div class="courseCard"></div>

  <div class="courseCard"></div>

  <div class="courseCard"></div>

  <div class="courseCard"></div>

</div>

看到背景线性效果，当你向左滚动时，它会移动，我想只修复该部分（父 html 标签）。
让我告诉你一件重要的事情，我在顶部和底部都有内容，所以我不能给它positon: fixed;，它会破坏它，并且不会完美运行。
请帮我

Answer 1

您需要在这里定位：粘性：.coursesSection--slider {&nbsp; display: flex;&nbsp; overflow: auto;&nbsp; position: relative;&nbsp; border:1px solid;}.coursesSection--slider::after {&nbsp; content: '';&nbsp; background-image: linear-gradient(to right, transparent , #fff );&nbsp; width: 5%;&nbsp; margin-left:auto;&nbsp; /* push to the right */&nbsp; flex-shrink:0;&nbsp; position: sticky;&nbsp; right: 0;}.courseCard:last-child {&nbsp; margin-right:-5%; /* same as pseudo element width to create overlap */}.courseCard {&nbsp; flex: 0 0 auto;&nbsp; width: 100px;&nbsp; height: 100px;&nbsp; background-color: red;&nbsp; margin-right: 10px;}<div class="coursesSection--slider">&nbsp; <div class="courseCard"></div>&nbsp; <div class="courseCard"></div>&nbsp; <div class="courseCard"></div>&nbsp; <div class="courseCard"></div>&nbsp; <div class="courseCard"></div>&nbsp; <div class="courseCard"></div>&nbsp; <div class="courseCard"></div>&nbsp; <div class="courseCard"></div></div>

Answer 2

尝试位置fixed而不是最后一张牌的absolute和z-index.coursesSection--slider {&nbsp; display: flex;&nbsp; overflow: auto;&nbsp; position: relative;}.coursesSection--slider::after {&nbsp; content: '';&nbsp; background-image: linear-gradient(to right, transparent 0%, #fff 100%);&nbsp; width: 40px;&nbsp; height: 100px;&nbsp; position: fixed;&nbsp; right: 0;&nbsp; top: 0;}.courseCard {&nbsp; flex: 0 0 auto;&nbsp; width: 100px;&nbsp; height: 100px;&nbsp; background-color: red;&nbsp; margin-right: 10px;}.courseCard:last-child {&nbsp; z-index: 2;}<div class="coursesSection--slider">&nbsp; <div class="courseCard"></div>&nbsp; <div class="courseCard"></div>&nbsp; <div class="courseCard"></div>&nbsp; <div class="courseCard"></div>&nbsp; <div class="courseCard"></div>&nbsp; <div class="courseCard"></div>&nbsp; <div class="courseCard"></div>&nbsp; <div class="courseCard"></div></div>