如何利用EventListener实现滚动显示、停止滚动隐藏滚动条？

你的思路方向是对的，但现有代码有两个核心问题导致没达到预期效果：

1. 绑定了两个独立的scroll事件监听器，滚动时它们会同时触发——第二个监听器会立刻把类名改成myscroll，而第一个监听器的定时器还没跑完，逻辑上相互冲突；
2. .hidescroll的CSS写法错误，没办法真正隐藏滚动条。

下面是修正后的完整实现，完全满足你的需求：

修正后的JavaScript代码 #

let scrollTimer = null;
const htmlElement = document.getElementById('myhtml');

window.addEventListener('scroll', function() {
  // 滚动开始时，先清除之前的定时器（避免重复触发隐藏逻辑）
  if (scrollTimer) clearTimeout(scrollTimer);
  
  // 立即显示滚动条
  htmlElement.classList.add('myscroll');
  htmlElement.classList.remove('hidescroll');
  
  // 设置定时器：停止滚动1250ms后隐藏滚动条
  scrollTimer = setTimeout(function() {
    htmlElement.classList.add('hidescroll');
    htmlElement.classList.remove('myscroll');
  }, 1250);
}, false);

修正后的CSS代码 #

/* 显示滚动条的样式 */
.myscroll::-webkit-scrollbar {
  border-radius: 5px;
  width: 10px;
}
.myscroll::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 5px;
}
.myscroll::-webkit-scrollbar-thumb {
  background: #888;
  border-radius: 5px;
}
.myscroll::-webkit-scrollbar-thumb:hover {
  background: #555;
  border-radius: 5px;
}

/* 隐藏滚动条的样式 */
.hidescroll::-webkit-scrollbar {
  width: 0; /* 通过设置宽度为0隐藏滚动条 */
  background: transparent;
}
/* 兼容Firefox的写法 */
.hidescroll {
  scrollbar-width: none;
}

对应的HTML结构（保持你的原有结构即可） #

<html lang="en" id="myhtml" class="hidescroll">
<head>
  <meta charset="utf-8" />
  <title> learning </title>
  <link rel="stylesheet" href="your-style.css"> <!-- 引入上面的CSS -->
</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标签 -->
  </div>
</div>
<script src="your-script.js"></script> <!-- 引入上面的JS -->
</body>
</html>

关键逻辑解释 #

• 只用一个scroll事件监听器，把显示和隐藏的逻辑整合在一起，避免冲突；
• 滚动时先清除之前的定时器，确保只有最后一次滚动停止后才会触发隐藏；
• 滚动开始时立刻切换到显示滚动条的类，停止滚动超时后切换到隐藏类；
• CSS修正了隐藏滚动条的写法，同时兼容Chrome（webkit内核）和Firefox浏览器。

这样就能实现滚动时显示滚动条，停止滚动1.25秒后自动隐藏的效果，而且可以反复触发，完全符合你的需求。

内容的提问来源于stack exchange，提问作者Hamza DriouCh