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;
}

<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">
          <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>
        <i id="slideBack" class="slideBack fas fa-chevron-up"></i>
        <i id="slide" class="slide fas fa-chevron-down"></i>
      </div>
    </div>
  </div>
</div>

Answer 1

要使渐变与下层元素相互作用，可以使用pointer-events: none
您的渐变绝对是用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>

自定义菜单项不可单击

1 个答案: