Fix background linear color in display: flex overflow scroll content - CSS

问题

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>

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

回答1:

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>

回答2:

Try position fixed instead of absolute and z-index for the last card

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

来源：https://stackoverflow.com/questions/60831894/fix-background-linear-color-in-display-flex-overflow-scroll-content-css

标签

javascript

jquery

html

css

Sass