自定义菜单项不可点击
我需要菜单项看起来像现在一样（就像在 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;
}
呼唤远方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>
随时随地看视频慕课网APP
相关分类
JavaScript