如何用纯JavaScript在页面顶部隐藏滚动条且保留滚动功能？

核心原理 #

不通过overflow: hidden禁用滚动，而是直接隐藏滚动条的视觉元素，同时保留页面的滚动功能。不同浏览器需要针对性的CSS样式处理，再通过JavaScript动态切换样式类。

步骤1：动态插入隐藏滚动条的样式 #

纯JS实现，无需外部CSS文件，直接创建样式标签插入页面：

// 创建样式标签并写入滚动条隐藏规则
const scrollStyle = document.createElement('style');
scrollStyle.textContent = `
.hide-scrollbar {
  /* Firefox 适配 */
  scrollbar-width: none;
  /* IE/旧版Edge 适配 */
  -ms-overflow-style: none;
}
/* Chrome、Edge、Safari 等Webkit内核浏览器适配 */
.hide-scrollbar::-webkit-scrollbar {
  width: 0;
  height: 0;
}
.hide-scrollbar::-webkit-scrollbar-track,
.hide-scrollbar::-webkit-scrollbar-thumb {
  background: transparent;
}
`;
document.head.appendChild(scrollStyle);

步骤2：结合位置检测逻辑切换样式 #

基于你已有的setInterval位置检测逻辑，判断页面处于顶部时添加样式类，离开顶部时移除：

// 复用你已有的滚动位置检测逻辑
setInterval(() => {
  const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
  const targetElements = [document.documentElement, document.body];
  if (scrollTop === 0) {
    targetElements.forEach(el => el.classList.add('hide-scrollbar'));
  } else {
    targetElements.forEach(el => el.classList.remove('hide-scrollbar'));
  }
}, 100); // 可根据需求调整检测间隔

说明 #

这种方式仅隐藏滚动条的视觉显示，页面的滚动功能完全保留，用户可以通过鼠标滚轮、键盘方向键或触摸滑动正常操作。如果页面存在局部滚动容器，只需针对容器单独套用上述样式类即可。

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