通过 css 的 `::-webkit-scrollbar { display: none; }` 可以隐藏 webkit 内核浏览器（如 chrome、safari、edge）的滚动条，同时完全保留原生滚动能力，无需 javascript 干预。
在网页开发中，常有“视觉上隐藏滚动条但用户仍可正常滚动”的需求——例如实现沉浸式单页浏览、自定义滚动指示器，或配合视差/分屏动效时避免滚动条干扰 UI 布局。关键在于：不能使用 overflow: hidden（它会禁用滚动），也不能依赖 JavaScript 模拟滚动（性能差且破坏原生体验）。
正确方案是利用浏览器提供的伪元素 API 隐藏滚动条轨道与滑块，而底层滚动行为不受影响。目前主流方案如下：
✅ WebKit 浏览器（Chrome / Safari / Edge / 新版 Opera）
使用 ::-webkit-scrollbar 伪类将滚动条设为不可见：
/* 隐藏所有方向的滚动条（含横向和纵向） */
::-webkit-scrollbar {
display: none;
}⚠️ 注意兼容性：该语法仅被 WebKit/Blink 内核支持，Firefox 和旧版 IE 不识别。对于 Firefox，可结合 scrollbar-width: none;（仅支持 Firefox 64+）：
/* Firefox 隐藏滚动条 */
* {
scrollbar-width: none; /* 'none' 或 'thin' */
}
/* 可选：进一步隐藏 Firefox 滚动条轨道（增强兼容） */
*::-moz-scrollbar {
width: 0 !important;
height: 0 !important;
display: none;
}✅ 完整推荐写法（兼顾现代浏览器）：
/* 全局隐藏滚动条（不影响滚动功能） */
* {
scrollbar-width: none; /* Firefox */
}
*::-webkit-scrollbar {
display: none; /* Chrome/Safari/Edge */
}? 重要说明：
- 此方法纯 CSS 实现，无需 JavaScript，性能零开销；
- 用户仍可通过鼠标滚轮、触控板、键盘（↑↓/PageUp/PageDown）、触摸拖拽等所有原生方式滚动；
- 若需动态控制（如仅在顶部隐藏），可结合 JS 切换 class：
window.addEventListener('scroll', () => { document.body.classList.toggle('hide-scrollbar', window.scrollY === 0); });并在 CSS 中定义：
.hide-scrollbar::-webkit-scrollbar, .hide-scrollbar { scrollbar-width: none; } .hide-scrollbar::-webkit-scrollbar { display: none; }
? 最后提醒：隐藏滚动条可能降低页面可访问性（尤其对不熟悉手势/键盘操作的用户）。建议在设计时评估必要性，或提供替代视觉提示（如淡入动画、底部箭头图标等），确保用户体验与无障碍支持兼得。
