滚动容器右侧的模糊效果答案

【问题标题】：Blur effect on the right side of scrolling container滚动容器右侧的模糊效果
【发布时间】：2020-09-17 08:45:12
【问题描述】：

我想在可滚动容器末尾的项目上实现模糊效果。但即使进一步滚动，它也会停留在一个项目上。它应该只贴在右侧。

初始图片

向右滚动时

.main-container .scrollable-nav {
    width: 75%;
    overflow-x: scroll;
    position: absolute;
}

.list-item-container {
    list-style: none;
    display: flex;
    font-size: 20px;
}

li {
    padding-right: 30px;
}

.right-bg::after {
    content: '';
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    width: 60px;
    height: 100%;
    right: 0;
    position: absolute;
    z-index: 9999999;
    margin-left: auto;
    top: 0;
    background: linear-gradient(to right, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, .7) 40%, #fff 70%);
}

<div class="main-container">
    <div class="scrollable-nav right-bg">
        <ul class="list-item-container ">
            <li class="m-item">menuItem1</li>
            <li class="m-item">menuItem2</li>
            <li class="m-item">menuItem3</li>
            <li class="m-item">menuItem4</li>
            <li class="m-item">menuItem5</li>
            <li class="m-item">menuItem6</li>
            <li class="m-item">menuItem7</li>
            <li class="m-item">menuItem8</li>
        </ul>
    </div>
</div>

小提琴链接：https://jsfiddle.net/uLd5bga1/2/

【问题讨论】：

标签： html css css-selectors pseudo-element pseudo-class

【解决方案1】：

您应该将伪元素直接提供给main-container。

.main-container {
  position: relative;
  width: 75%;
}

.main-container .scrollable-nav {
  width: 100%;
  overflow-x: scroll;
}

.list-item-container {
  list-style: none;
  display: flex;
  font-size: 20px;
}

li {
  padding-right: 30px;
}

.main-container::after {
  content: '';
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: 60px;
  height: calc(100% - 20px);
  right: 0;
  position: absolute;
  z-index: 9999999;
  margin-left: auto;
  top: 0;
  background: linear-gradient(to right, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, .7) 40%, #fff 70%);
}

<div class="main-container">
  <div class="scrollable-nav right-bg">
    <ul class="list-item-container ">
      <li class="m-item">menuItem1</li>
      <li class="m-item">menuItem2</li>
      <li class="m-item">menuItem3</li>
      <li class="m-item">menuItem4</li>
      <li class="m-item">menuItem5</li>
      <li class="m-item">menuItem6</li>
      <li class="m-item">menuItem7</li>
      <li class="m-item">menuItem8</li>
    </ul>
  </div>
</div>

【讨论】：