如何用css+JavaScript实现一个上下透明度渐变的滚动框

Question

现在需要用vue实现一个如图所示的滚动选择器：

我尝试了以下的代码：
HTML：

<div style="width: 100%; padding: 3vw 4vw; display: table; height: 70vw;">
  <div style="display: table-cell; height: 70vw;">
    <div class="scroll">
      <div :key="'year' + item" v-for="item of yearList" style="font-size: 5vw; height: 10vw">{{ item }}</div>
    </div>
    <div class="fade-in"/>
    <div class="fade-out"/>
  </div>
</div>

css：

.scroll {
    overflow-y: scroll;
    display: inline-block;
    height: 70vw;
  }

  .fade-in {
    position: absolute;
    z-index: 3;
    width: 88vw;
    top: 0vw;
    height: 33vw;
    background-size: 100% 100%;
    background: -webkit-linear-gradient(
      rgba(255, 255, 255, 1) 0%,
      rgba(255, 255, 255, 0.5) 100%
    );
    background-image: -moz-linear-gradient(
      rgba(255, 255, 255, 1) 0%,
      rgba(255, 255, 255, 0.5) 100%
    );
    background-image: -o-linear-gradient(
      rgba(255, 255, 255, 1) 0%,
      rgba(255, 255, 255, 0.5) 100%
    );
    background-image: linear-gradient(
      rgba(255, 255, 255, 1) 0%,
      rgba(255, 255, 255, 0.5) 100%
    );
    background-image: -ms-linear-gradient(
      rgba(255, 255, 255, 1) 0%,
      rgba(255, 255, 255, 0.5) 100%
    );
  }

  .fade-out {
    position: absolute;
    z-index: 3;
    width: 88vw;
    top: 40vw;
    height: 33vw;
    background-size: 100% 100%;
    background: -webkit-linear-gradient(
      rgba(255, 255, 255, 0.5) 0%,
      rgba(255, 255, 255, 1) 100%
    );
    background-image: -moz-linear-gradient(
      rgba(255, 255, 255, 0.5) 0%,
      rgba(255, 255, 255, 1) 100%
    );
    background-image: -o-linear-gradient(
      rgba(255, 255, 255, 0.5) 0%,
      rgba(255, 255, 255, 1) 100%
    );
    background-image: linear-gradient(
      rgba(255, 255, 255, 0.5) 0%,
      rgba(255, 255, 255, 1) 100%
    );
    background-image: -ms-linear-gradient(
      rgba(255, 255, 255, 0.5) 0%,
      rgba(255, 255, 255, 1) 100%
    );
  }

那么问题就来了，class为fade-in和fade-out的层盖过了滚动区域，使得红绿交叉的地方无法触发滚动，请问各位大佬们有更好的解决方法吗

Answer 1

css 属性 pointer-event 了解一下

Answer 2

试试事件委托？

Answer 3

提供个思路，不知道能不能满足

可以做个渐变的浮层在上面，设置透明度；然后滚动的时候，让这个浮层出来，停止滚动就消失。

这样是不是容易控制些。

另外： 做动画效果的时候，实现方式很重要。

Answer 4

touch-action: none;使元素不响应touch事件.

其实你应该用容器的伪元素来实现.正好有两个

Answer 5

使用伪元素 before / after 代替DOM节点 fade-in / fade-out