显示滚动条
Div with horizontal scrolling only
.container { width: 30em; overflow-x: auto; white-space: nowrap; }
隐藏滚动条,但保持页面依旧能够滚动
html – Hide scroll bar, but while still being able to scroll – Stack Overflow
问题描述
我们希望隐藏滚动条(但是,后来我们又选择显示滚动条,因为隐藏滚动条会降低页面的交互。什么意思呢?假如我们阅读到文章的底部,当我们希望快速回到最开始,对于多数用户来说,鼠标拖动滚动条是唯一的选择(很少会有人使用 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 */ }