是否可能在EventListener上隐藏或显示滚动条？
我的目标是
在页面上滚动时，滚动条应变为启用（显示）或（溢出:自动）
停止滚动一段时间后，滚动条应变为禁用（隐藏）（溢出:隐藏）
一次又一次的使用
我尝试在滚动上使用事件侦听器，但没有任何结果！。。 还有别的方法吗？
null
var timer = null;
window.addEventListener('scroll', function() {
if (timer !== null) {
clearTimeout(timer);
}
timer = setTimeout(function() {
console.log("hide");
document.getElementById('myhtml').className = 'hidescroll';
}, 1250);
}, false);
window.addEventListener('scroll', function() {
console.log("show");
document.getElementById('myhtml').className = 'myscroll';
}, false);/* width */
.myscroll::-webkit-scrollbar {
border-radius: 5px;
width: 10px;
}
/* Track */
.myscroll::-webkit-scrollbar-track {
background: #f1f1f1;
border-radius: 5px;
}
/* Handle */
.myscroll::-webkit-scrollbar-thumb {
background: #888;
border-radius: 5px;
}
/* Handle on hover */
.myscroll::-webkit-scrollbar-thumb:hover {
position: relative;
background: #555;
border-radius: 5px;
}
.hidescroll::-webkit-scrollbar {
overflow: hidden;
}<html lang="en" id="myhtml" class="">
<head>
<meta charset="utf-8" />
<title> learning </title>
</head>
<body>
<div class="wrapper">
<div class="sidebar"> </div>
<div>
<p>The command takes options applicable</p>
<p>The command takes options applicable</p>
<p>The command takes options applicable</p>
<p>The command takes options applicable</p>
<p>The command takes options applicable</p>
<p>The command takes options applicable</p>
<p>The command takes options applicable</p>
<p>The command takes options applicable</p>
<p>The command takes options applicable</p>
<p>The command takes options applicable</p>
<p>The command takes options applicable</p>
<p>The command takes options applicable</p>
<p>The command takes options applicable</p>
<p>The command takes options applicable</p>
<p>The command takes options applicable</p>
<p>The command takes options applicable</p>
<p>The command takes options applicable</p>
<p>The command takes options applicable</p>
<p>The command takes options applicable</p>
<p>The command takes options applicable</p>
</div>
</div>
</body>
</html>null
如果隐藏元素溢出，则不会激发滚动事件。 您可能希望使用MouseWheel事件。
null
let timer;
let element = document.querySelector("body");
element.addEventListener('mousewheel', function(e) {
clearTimeout(timer);
var delta = e.wheelDelta;
timer = setTimeout(function() {
element.classList.add('hidescroll');
}, 1250);
element.classList.remove('hidescroll');
});body.hidescroll {
overflow: hidden;
}<div class="wrapper">
<div class="sidebar"> </div>
<div>
<p>The command takes options applicable</p>
<p>The command takes options applicable</p>
<p>The command takes options applicable</p>
<p>The command takes options applicable</p>
<p>The command takes options applicable</p>
<p>The command takes options applicable</p>
<p>The command takes options applicable</p>
<p>The command takes options applicable</p>
<p>The command takes options applicable</p>
<p>The command takes options applicable</p>
<p>The command takes options applicable</p>
<p>The command takes options applicable</p>
<p>The command takes options applicable</p>
<p>The command takes options applicable</p>
<p>The command takes options applicable</p>
<p>The command takes options applicable</p>
<p>The command takes options applicable</p>
<p>The command takes options applicable</p>
<p>The command takes options applicable</p>
<p>The command takes options applicable</p>
<p>The command takes options applicable</p>
<p>The command takes options applicable</p>
<p>The command takes options applicable</p>
<p>The command takes options applicable</p>
<p>The command takes options applicable</p>
<p>The command takes options applicable</p>
<p>The command takes options applicable</p>
<p>The command takes options applicable</p>
<p>The command takes options applicable</p>
<p>The command takes options applicable</p>
<p>The command takes options applicable</p>
<p>The command takes options applicable</p>
<p>The command takes options applicable</p>
<p>The command takes options applicable</p>
<p>The command takes options applicable</p>
<p>The command takes options applicable</p>
<p>The command takes options applicable</p>
<p>The command takes options applicable</p>
<p>The command takes options applicable</p>
<p>The command takes options applicable</p>
</div>
</div>