「CSS」- 隐藏滚动条，但保持页面依旧能够滚动 @20210429

问题描述

我们希望隐藏滚动条（但是，后来我们又选择显示滚动条，因为隐藏滚动条会降低页面的交互。什么意思呢？假如我们阅读到文章的底部，当我们希望快速回到最开始，对于多数用户来说，鼠标拖动滚动条是唯一的选择（很少会有人使用 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」- 隐藏过长的文本，使其显示为省略号
「CSS」- 将元素悬浮在右上角
「Front End」- 使用 CSS Selector 选择元素

参考文献

html - Hide scroll bar, but while still being able to scroll - Stack Overflow