CSS | 隐藏滚动条，但保持页面依旧能够滚动_css隐藏滚动条但能滚动-CSDN博客

本文探讨了在CSS中隐藏滚动条与保持页面可滚动性的平衡，指出隐藏滚动条可能影响交互性。提供了一段CSS代码实现隐藏滚动条（适用于多种浏览器），并建议在必要时考虑显示滚动条以提升用户体验。同时，文章还提及了相关CSS技巧和链接到其他相关主题。

原文地址：CSS | 隐藏滚动条，但保持页面依旧能够滚动（永久地址，保存网址不迷路 🙃）

问题描述

我们希望隐藏滚动条（但是，后来我们又选择显示滚动条，因为隐藏滚动条会降低页面的交互。什么意思呢？假如我们阅读到文章的底部，当我们希望快速回到最开始，对于多数用户来说，鼠标拖动滚动条是唯一的选择（很少会有人使用 SPACE、PageUp、PageDown 等等快捷键）。在某种程度上，虽然隐藏滚动条也许会提高页面的美观度，但是却牺牲交互性。所以最后选择显示滚动条，不过我们依旧会记录隐藏滚动条的方法。换个角度看这个问题，如果隐藏滚动条是个明智的选择，那么隐藏滚动条绝对会是浏览器的默认行为，何时轮到我们来做这件事）。

虽然原始的 overflow: hidden; 能够隐藏滚动条，但是页面却无法滚动，而我们希望页面依旧能滚动。

该笔记将记录：在 CSS 中，用于隐藏滚动条的 CSS 代码，以及相关问题的处理方法。

解决方案

隐藏滚动条的 CSS 代码：

.container {
    -ms-overflow-style: none;  /* Internet Explorer 10+ */
    scrollbar-width: none;     /* Firefox */
}
.container::-webkit-scrollbar { 
    display: none;            /* Safari and Chrome */
}

「CSS」- 响应式网页设计
 「CSS」- 将元素悬浮在右上角
 「CSS」- 隐藏过长的文本，使其显示为省略号
 「Front End」- 使用 CSS Selector 选择元素
 「CSS」- 不同语言使用不同字体