显示滚动条

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 */
}