隐藏滚动条，但仍然可以滚动

Question

隐藏滚动条，但仍然可以滚动

我希望能够滚动整个页面，但不显示滚动条。

在谷歌浏览器中它是：

::-webkit-scrollbar { 
    display: none; }

但是Mozilla Firefox和Internet Explorer似乎并没有那样工作。

我也在CSS中尝试过这个：

overflow: hidden;

这确实隐藏了滚动条，但我不能滚动了。

有什么办法可以删除滚动条，同时还能滚动整个页面吗？请使用CSS或HTML。

Answer 1

这适用于简单的CSS属性：.container {     -ms-overflow-style: none;  // IE 10+     scrollbar-width: none;  // Firefox}.container::-webkit-scrollbar {      display: none;  // Safari and Chrome}更新：scrollbar-width为Firefox 添加了新属性。对于旧版本的Firefox，请使用： overflow: -moz-scrollbars-none;

Answer 2

更新：&nbsp;Firefox现在支持使用CSS隐藏滚动条，因此现在涵盖了所有主流浏览器（Chrome，Firefox，IE，Safari等）。只需将以下CSS应用于要从中删除滚动条的元素：.container&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;overflow-y:&nbsp;scroll; &nbsp;&nbsp;&nbsp;&nbsp;scrollbar-width:&nbsp;none;&nbsp;/*&nbsp;Firefox&nbsp;*/ &nbsp;&nbsp;&nbsp;&nbsp;-ms-overflow-style:&nbsp;none;&nbsp;&nbsp;/*&nbsp;IE&nbsp;10+&nbsp;*/}.container::-webkit-scrollbar&nbsp;{&nbsp;/*&nbsp;WebKit&nbsp;*/ &nbsp;&nbsp;&nbsp;&nbsp;width:&nbsp;0; &nbsp;&nbsp;&nbsp;&nbsp;height:&nbsp;0;}这是我目前所知道的最少hacky跨浏览器解决方案。看看演示。原始答案：这是另一种尚未提及的方式。它非常简单，只涉及两个div和CSS。不需要JavaScript或专有CSS，它适用于所有浏览器。它不需要明确地设置容器的宽度，从而使其流动。此方法使用负边距将滚动条移出父级，然后使用相同数量的填充将内容推回到其原始位置。该技术适用于垂直，水平和双向滚动。演示：垂直横两个方向垂直版本的示例代码：HTML：<div&nbsp;class="parent"> &nbsp;&nbsp;<div&nbsp;class="child"> &nbsp;&nbsp;&nbsp;&nbsp;Your&nbsp;content.&nbsp;&nbsp;</div></div>CSS：.parent{ &nbsp;&nbsp;width:&nbsp;400px; &nbsp;&nbsp;height:&nbsp;200px; &nbsp;&nbsp;border:&nbsp;1px&nbsp;solid&nbsp;#aaa; &nbsp;&nbsp;overflow:&nbsp;hidden;}.child{ &nbsp;&nbsp;height:&nbsp;100%; &nbsp;&nbsp;margin-right:&nbsp;-50px;&nbsp;/*&nbsp;maximum&nbsp;width&nbsp;of&nbsp;scrollbar&nbsp;*/ &nbsp;&nbsp;padding-right:&nbsp;50px;&nbsp;/*&nbsp;maximum&nbsp;width&nbsp;of&nbsp;scrollbar&nbsp;*/ &nbsp;&nbsp;overflow-y:&nbsp;scroll;}

Answer 3

只是一个工作正常的测试。#parent{ &nbsp;&nbsp;&nbsp;&nbsp;height:&nbsp;100%; &nbsp;&nbsp;&nbsp;&nbsp;width:&nbsp;100%; &nbsp;&nbsp;&nbsp;&nbsp;overflow:&nbsp;hidden;}#child{ &nbsp;&nbsp;&nbsp;&nbsp;width:&nbsp;100%; &nbsp;&nbsp;&nbsp;&nbsp;height:&nbsp;100%; &nbsp;&nbsp;&nbsp;&nbsp;overflow-y:&nbsp;scroll; &nbsp;&nbsp;&nbsp;&nbsp;padding-right:&nbsp;17px;&nbsp;/*&nbsp;Increase/decrease&nbsp;this&nbsp;value&nbsp;for&nbsp;cross-browser&nbsp;compatibility&nbsp;*/ &nbsp;&nbsp;&nbsp;&nbsp;box-sizing:&nbsp;content-box;&nbsp;/*&nbsp;So&nbsp;the&nbsp;width&nbsp;will&nbsp;be&nbsp;100%&nbsp;+&nbsp;17px&nbsp;*/}工作小提琴JavaScript的：由于滚动条宽度在不同浏览器中有所不同，因此最好使用JavaScript处理它。如果这样做Element.offsetWidth - Element.clientWidth，将显示确切的滚动条宽度。JavaScript工作小提琴要么使用Position: absolute，#parent{ &nbsp;&nbsp;&nbsp;&nbsp;height:&nbsp;100%; &nbsp;&nbsp;&nbsp;&nbsp;width:&nbsp;100%; &nbsp;&nbsp;&nbsp;&nbsp;overflow:&nbsp;hidden; &nbsp;&nbsp;&nbsp;&nbsp;position:&nbsp;relative;}#child{ &nbsp;&nbsp;&nbsp;&nbsp;position:&nbsp;absolute; &nbsp;&nbsp;&nbsp;&nbsp;top:&nbsp;0; &nbsp;&nbsp;&nbsp;&nbsp;bottom:&nbsp;0; &nbsp;&nbsp;&nbsp;&nbsp;left:&nbsp;0; &nbsp;&nbsp;&nbsp;&nbsp;right:&nbsp;-17px;&nbsp;/*&nbsp;Increase/Decrease&nbsp;this&nbsp;value&nbsp;for&nbsp;cross-browser&nbsp;compatibility&nbsp;*/ &nbsp;&nbsp;&nbsp;&nbsp;overflow-y:&nbsp;scroll;}工作小提琴JavaScript工作小提琴信息：根据这个答案，我创建了一个简单的滚动插件。我希望这会对某人有所帮助。

Answer 4

在WebKit中很容易，有可选的样式：html&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;overflow:&nbsp;scroll; &nbsp;&nbsp;&nbsp;&nbsp;overflow-x:&nbsp;hidden;}::-webkit-scrollbar&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;width:&nbsp;0px;&nbsp;&nbsp;/*&nbsp;Remove&nbsp;scrollbar&nbsp;space&nbsp;*/ &nbsp;&nbsp;&nbsp;&nbsp;background:&nbsp;transparent;&nbsp;&nbsp;/*&nbsp;Optional:&nbsp;just&nbsp;make&nbsp;scrollbar&nbsp;invisible&nbsp;*/}/*&nbsp;Optional:&nbsp;show&nbsp;position&nbsp;indicator&nbsp;in&nbsp;red&nbsp;*/: &nbsp;&nbsp;&nbsp;&nbsp;:-webkit-scrollbar-thumb&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;background:&nbsp;#FF0000;}