自定义菜单项不可点击

Question

我需要菜单项看起来像现在一样（就像在 iOS 中一样），但到目前为止我有两个大问题。首先，当我尝试单击其中一个链接时，由于我的线性渐变，这是不可能的。其次，当我单击向下箭头浏览其他菜单项时，所有渐变都不起作用。我怎样才能让它正常工作？我也做了一个codepen此 document.querySelectorAll('.slide').forEach(function (next) {   next.addEventListener('click', function () {     var container = this.parentElement.querySelector('.select');     sideScroll(container, 'bottom', 20, 25, 15);   }); });document.querySelectorAll('.slideBack').forEach(function (back) {  back.addEventListener('click', function () {    var container = this.parentElement.querySelector('.select');    sideScroll(container, 'top', 20, 25, 15);  });});function sideScroll(element, direction, speed, distance, step) {  scrollAmount = 0;  var slideTimer = setInterval(function () {    if (direction == 'top') {      element.scrollTop -= step;    } else {      element.scrollTop += step;    }    scrollAmount += step;    if (scrollAmount >= distance) {      window.clearInterval(slideTimer);    }  }, speed);}* {  background: #80acdc;}.larger {   height: 100vh;   display: flex;   justify-content: center;   align-items: center;} .larger .select {   width: 240px;   height: 270px;   display: flex;   flex-direction: column;   text-align: center;   overflow-y: hidden;   -ms-overflow-style: scroll;   scrollbar-width: none;   position: relative;} .larger .select::after {   content: '';   position: absolute;   display: block;   width: 100%;   height: 100%;   top: 0;   left: 0;   background-image: linear-gradient(#80acdc, transparent, #80acdc);} .larger .select a {   color: white;   margin: 3.5px 0;} .larger .select a:first-child {   margin-top: 0;} .larger #slide {   position: absolute;   left: 47%;   bottom: 38px;   color: #fff;   font-size: 15px;   cursor: pointer;} .larger #slideBack {   position: absolute;   top: 38px;   left: 47%;   color: #fff;   font-size: 15px;   cursor: pointer;}

Answer 1

1. 对于允许与底层元素交互的渐变，您可以使用 pointer-events: none

2. 您的渐变是绝对定位的，top: 0因此它与滚动一起使用。为了解决这个问题，您可以将渐变的位置设置为fixed（但随后它将被拉伸到 vewport 的大小）。更好的方法是用另一个容器包装选项列表，这样滚动就不会影响渐变位置..像这样：

<div class="select-wrap">

  <div class="select">

    ...

  </div>

</div>

.larger .select-wrap {

  width: 240px;

  height: 270px;

}

.larger .select-wrap .select {

  height: 100%;

  display: flex;

  flex-direction: column;

  text-align: center;

  overflow-y: hidden;

  -ms-overflow-style: scroll;

  scrollbar-width: none;

  position: relative;

}

.larger .select-wrap::after {

  content: '';

  position: absolute;

  display: block;

  width: 100%;

  height: 100%;

  top: 0;

  left: 0;

  background-image: linear-gradient(#80acdc, transparent, #80acdc);

  pointer-events: none; /* this allows for the mouse clicks go through */

}

document.querySelectorAll('.slide').forEach(function(next) {

  next.addEventListener('click', function() {

    var container = this.parentElement.querySelector('.select');

    sideScroll(container, 'bottom', 20, 25, 15);

  });

});

document.querySelectorAll('.slideBack').forEach(function(back) {

  back.addEventListener('click', function() {

    var container = this.parentElement.querySelector('.select');

    sideScroll(container, 'top', 20, 25, 15);

  });

});

function sideScroll(element, direction, speed, distance, step) {

  scrollAmount = 0;

  var slideTimer = setInterval(function() {

    if (direction == 'top') {

      element.scrollTop -= step;

    } else {

      element.scrollTop += step;

    }

    scrollAmount += step;

    if (scrollAmount >= distance) {

      window.clearInterval(slideTimer);

    }

  }, speed);

}

* {

  background: #80acdc;

}

.larger {

  height: 100vh;

  display: flex;

  justify-content: center;

  align-items: center;

}

.larger .select-wrap {

  width: 240px;

  height: 270px;

}

.larger .select-wrap .select {

  height: 100%;

  display: flex;

  flex-direction: column;

  text-align: center;

  overflow-y: hidden;

  -ms-overflow-style: scroll;

  scrollbar-width: none;

  position: relative;

}

.larger .select-wrap::after {

  content: '';

  position: absolute;

  display: block;

  width: 100%;

  height: 100%;

  top: 0;

  left: 0;

  background-image: linear-gradient(#80acdc, transparent, #80acdc);

  pointer-events: none;

}

.larger .select a {

  color: white;

  margin: 3.5px 0;

}

.larger .select a:first-child {

  margin-top: 0;

}

.larger #slide {

  position: absolute;

  left: 47%;

  bottom: 38px;

  color: #fff;

  font-size: 15px;

  cursor: pointer;

}

.larger #slideBack {

  position: absolute;

  top: 38px;

  left: 47%;

  color: #fff;

  font-size: 15px;

  cursor: pointer;

}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css">

<div class="container">

  <div class="row">

    <div class="col-lg-3">

      <div class="larger">

        <div class="select-wrap">

          <div class="select">

            <a href="#">Action Lorem </a>

            <a href="#">Test Text</a>

            <a href="#">Action Lorem</a>

            <a href="#">Test Text</a>

            <a href="#">Action Lorem</a>

            <a href="#">Test Text</a>

            <a href="#">Action Lorem</a>

            <a href="#">Test Text</a>

            <a href="#">Action Lorem</a>

            <a href="#">Test Text</a>

            <a href="#">Action Lorem</a>

            <a href="#">Test Text</a>

            <a href="#">Action Lorem</a>

            <a href="#">Test Text</a>

            <a href="#">Action Lorem</a>

            <a href="#">Test Text</a>

          </div>

        </div>

        <i id="slideBack" class="slideBack fas fa-chevron-up"></i>

        <i id="slide" class="slide fas fa-chevron-down"></i>

      </div>

    </div>

  </div>

</div>