修复显示中的背景线性颜色：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 {

  display: flex;

  overflow: auto;

  position: relative;

  border:1px solid;

}

.coursesSection--slider::after {

  content: '';

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

  width: 5%;

  margin-left:auto;  /* push to the right */

  flex-shrink:0;

  position: sticky;

  right: 0;

}

.courseCard:last-child {

  margin-right:-5%; /* same as pseudo element width to create overlap */

}

.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>

Answer 2

尝试位置fixed而不是最后一张牌的absolute和z-index

.coursesSection--slider {

  display: flex;

  overflow: auto;

  position: relative;

}

.coursesSection--slider::after {

  content: '';

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

  width: 40px;

  height: 100px;

  position: fixed;

  right: 0;

  top: 0;

}

.courseCard {

  flex: 0 0 auto;

  width: 100px;

  height: 100px;

  background-color: red;

  margin-right: 10px;

}

.courseCard:last-child {

  z-index: 2;

}

<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>