javascript - 在滚动 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。

我也在使用 vanilla 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 */
}