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

  CREATED BY JENKINSBOT

问题描述

我们希望隐藏滚动条(但是,后来我们又选择显示滚动条,因为隐藏滚动条会降低页面的交互。什么意思呢?假如我们阅读到文章的底部,当我们希望快速回到最开始,对于多数用户来说,鼠标拖动滚动条是唯一的选择(很少会有人使用 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 */
}

参考文献

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