自定义菜单项不可单击

Question

我需要菜单项看起来像现在一样(就像在iOS中一样(，但到目前为止，我有两个大问题。 首先，当我尝试单击其中一个链接时，由于我的线性梯度，这是不可能的。其次，当我单击向下箭头浏览其他菜单项时，所有渐变都不起作用。 如何使其正常工作？

我还为此制作了一支代码笔

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

1. 为了使渐变允许与下属元素进行交互，您可以使用pointer-events: none

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

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