在滚动 div 的边缘淡化子 flexbox 元素？

Question

我有一个带有子 div 的 flexbox 容器：

.flex-l, .flex-c {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.flex-l {
  justify-content: flex-start;
}

.flex-c {
  justify-content: center;
}

.sidebar {
  width: 100%;
  height: 100vh;
  background: rgba(0 ,0 ,0 ,0.05);
}

.selector-bar {
  width: 90%;
  height: 5vh;
  overflow: auto;
}

.selector-bar::-webkit-scrollbar {
  display: none;
}

.sidebar-group-img, .sidebar-friend-img {
  height: 2.2vw;
  width: 2.2vw;
  margin: 0.2vw;
  flex-shrink: 0;
}

.sidebar-group-img {
  background: rgba(46, 204, 113, 0.6);
}

.group-chat-text {
  opacity: 0;
  transition: 1s;
  position: relative;
  z-index: 10;
  transform: translate(21px);
}

.group-chat-img {
  opacity: 1;
  transition: 1s;
  position: relative;
  z-index: 11;
  transform: translate(-17px)
}

.sidebar-group-img:hover .group-chat-text {
  opacity: 1;
  transition: 0.2s;
}

.sidebar-group-img:hover .group-chat-img {
  opacity: 0.25;
  transition: 0.2s;
}

<div class="flex-l selector-bar">
  <div class="flex-c sidebar-group-img">
    <h4 class="group-chat-text">Chat</h4>
    <img class="group-chat-img" src="./img/logo-1.jpg" alt="Group Logo">
  </div>
  <div class="flex-c sidebar-group-img">
    <h4 class="group-chat-text">Chat</h4>
    <img class="group-chat-img" src="./img/logo-2.jpg" alt="Group Logo">
  </div>
  <div class="flex-c sidebar-group-img">
    <h4 class="group-chat-text">Chat</h4>
    <img class="group-chat-img" src="./img/logo-3.jpg" alt="Group Logo">
  </div>
  <div class="flex-c sidebar-group-img">
    <h4 class="group-chat-text">Chat</h4>
    <img class="group-chat-img" src="./img/logo-4.png" alt="Group Logo">
  </div>
  <div class="flex-c sidebar-group-img">
    <h4 class="group-chat-text">Chat</h4>
    <img class="group-chat-img" src="./img/logo-5.jpg" alt="Group Logo">
  </div>
</div>

我想为selector-bar 容器添加一个淡入淡出效果，如下所示： https://codepen.io/timothylong/pen/RodjKW

问题是我的容器背景是透明的，所以我不能简单地使用linear-gradient。我试过了，但我想不出一种不降低不透明度的方法。

我也看过这个： https://codepen.io/annalarson/pen/GesqK 我也不希望这样，因为我希望在没有用户交互的情况下直观地看到渐变。

我能看到实现这一点的唯一方法是定位子元素本身，并在它们靠近容器边缘时让它们褪色。不过，我无法理解 JS。

我也在使用香草 JS。不是 jQuery。

这可能吗？

Answer 1

您可以在所有项目的容器下添加一个 div 元素，并为其赋予绝对位置和渐变背景。您还必须有另一个具有相对位置的容器元素并将这两个容器放入其中。 这是一个例子：

<div id="mainContainer">
    <div id="itemsContainer">
        <div class="itemOuter">Item 1</div>
        <div class="itemOuter">Item 2</div>
        <div class="itemOuter">Item 3</div>
        <div class="itemOuter">Item 4</div>
    </div>
    <div id="overlayContainer"></div>
  </div>

#mainContainer{
    position: relative;
}
#overlayContainer{
    position: absolute;
    bottom: 0;
    left: 0;
    width:100%;
    height: 100%;
    pointer-events: none;
background: -moz-linear-gradient(top, rgba(30,87,153,0) 50%, rgba(125,185,232,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, rgba(30,87,153,0) 50%,rgba(125,185,232,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, rgba(30,87,153,0) 50%,rgba(125,185,232,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#001e5799', endColorstr='#7db9e8',GradientType=0 ); /* IE6-9 */
}