修复显示中的背景线性颜色:flex溢出滚动内容-CSS [英] Fix background linear color in display: flex overflow scroll content - CSS

问题描述

我有一个可滚动的滑块，我已经在overflow:scroll的父标记中添加了::after的背景线性效果，但是当我向左滚动时，背景颜色随内容而移动.我希望将其固定在正确的位置. Lemme显示示例代码:

I have a scrollable slider, I've put background linear effect with ::after in parent tag who is making it overflow:scroll, But when I scroll to left, background color moves with content. I want it to be fix in right position. Lemme show sample code:

.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标签).
Lemme告诉您一件重要的事情，我在顶部和底部都有内容，因此我不能给它positon: fixed;，它将破坏它，并且不能完美运行.
请帮助我

See that background-linear effect, and when you'll scroll to left, It will move, I want to to be fix with only that section (parent html tag).
Lemme tell you one important thing that I have content in top and bottom, so I can't give it positon: fixed;, It will break it, and will not run perfectly.
Please help me

推荐答案

您需要在此处粘贴位置:

You need position:sticky here:

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

这篇关于修复显示中的背景线性颜色:flex溢出滚动内容-CSS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！