如何隐藏滚动条, 同时仍然可以在任何元素上滚动?
首先, 如果需要隐藏滚动条并在内容溢出时显示滚动条, 只需要设置 overflow:auto 样式即可. 想要完全隐藏滚动条只需设置 overflow:hidden 即可, 但是这样一来将导致元素内容不可滚动. 时至今日, 还没有任何一条 CSS 规则可以使元素可以隐藏滚动条的同时依然可以滚动内容, 只能通过针对特定浏览器设置滚动条样式来实现.
Firefox 浏览器
对于 Firefox, 我们可以将滚动条宽度设置为 none:
scrollbar-width: none; /* Firefox */
IE 浏览器
对于 IE, 我们需要使用 - ms-prefix 属性定义滚动条样式:
-ms-overflow-style: none; /* IE 10+ */
Chrome 和 Safari 浏览器
对于 Chrome 和 Safari 浏览器, 我们必须使用 CSS 滚动条选择器, 然后使用 display:none 隐藏它:
- ::-webkit-scrollbar {
- display: none; /* Chrome Safari */
- }
注意: 当你要隐藏滚动条的时候, 最好将 overflow 显示设置为 auto 或者 scroll 保证内容是可滚动的.
示例
我们使用上面的 CSS 属性以及溢出实现下面一个实例 -- 隐藏水平滚动条, 同时允许垂直滚动条:
- .demo::-webkit-scrollbar {
- display: none; /* Chrome Safari */
- }
- .demo {
- scrollbar-width: none; /* Firefox */
- -ms-overflow-style: none; /* IE 10+ */
- overflow-x: hidden;
- overflow-y: auto;
- }
来源: http://www.jianshu.com/p/17fe42ce3bdc