隐藏滚动条，但仍然可以滚动
我想能够滚动整个页面，但没有显示滚动条。
在Google Chrome中，它是：
::-webkit-scrollbar { display: none; } 但Mozilla Firefox和Internet Explorer似乎并不像那样工作。
我也试过在CSS中：
overflow: hidden;
这确实隐藏了滚动条，但我不能滚动了。
有什么办法可以删除滚动条，仍然可以滚动整个页面？ 请只用CSS或HTML。
只是一个testing工作正常。
#parent{ height: 100%; width: 100%; overflow: hidden; } #child{ width: 100%; height: 100%; overflow-y: scroll; padding-right: 17px; /* Increase/decrease this value for cross-browser compatibility */ }
工作小提琴
JavaScript的：
由于滚动条宽度在不同浏览器中有所不同，最好用JavaScript处理。 如果你做Element.offsetWidth - Element.clientWidth ，确切的滚动条宽度将显示出来。
JavaScript工作小提琴
要么
使用Position: absolute ，
#parent{ height: 100%; width: 100%; overflow: hidden; position: relative; } #child{ position: absolute; top: 0; bottom: 0; left: 0; right: -17px; /* Increase/Decrease this value for cross-browser compatibility */ overflow-y: scroll; }
工作小提琴
JavaScript工作小提琴
信息：
基于这个答案，我创build了一个简单的滚动插件 。 我希望这会帮助别人。
易于使用Webkit，可选样式：
html { overflow: scroll; overflow-x: hidden; } ::-webkit-scrollbar { width: 0px; /* remove scrollbar space */ background: transparent; /* optional: just make scrollbar invisible */ } /* optional: show position indicator in red */ ::-webkit-scrollbar-thumb { background: #FF0000; }
<div style='overflow:hidden; width:500px;'> <div style='overflow:scroll; width:508px'> My scroll-able area </div> </div>
这是一个有点重叠的滚动条重叠div没有任何滚动条的技巧
::-webkit-scrollbar { display: none; }
这只适用于webkit浏览器..或者你可以使用浏览器特定的CSS（如果将来有任何的）每个浏览器可以有不同的和具体的属性，为他们各自的酒吧
– 编辑 –
对于Microsoft Edge使用： -ms-overflow-style: -ms-autohiding-scrollbar; 或-ms-overflow-style: none; 根据MSDN 。
FF没有等价物虽然有JQuery插件来实现这个http://manos.malihu.gr/tuts/jquery_custom_scrollbar.html
这适用于我：
.container { -ms-overflow-style: none; // IE 10+ overflow: -moz-scrollbars-none; // Firefox } .container::-webkit-scrollbar { display: none; // Safari and Chrome }
注意：在最新版本的Firefox中， -moz-scrollbars-none属性已被弃用（ 链接 ）。
这个答案不包括代码，所以这里是从页面的解决scheme：
根据这个页面，这个方法并不需要事先知道滚动条的宽度，这个方法也适用于所有的浏览器， 在这里可以看到。
好处是你不必强制使用填充或宽度差异来隐藏滚动条。
这也是放大安全的。 填充/宽度解决scheme在放大到最小值时显示滚动条。
FF修正： http : //jsbin.com/mugiqoveko/1/edit?output
.element, .outer-container { width: 200px; height: 200px; } .outer-container { border: 5px solid purple; position: relative; overflow: hidden; } .inner-container { position: absolute; left: 0; overflow-x: hidden; overflow-y: scroll; padding-right: 150px; } .inner-container::-webkit-scrollbar { display: none; }
<div class="outer-container"> <div class="inner-container"> <div class="element"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer vehicula quam nibh, eu tristique tellus dignissim quis. Integer condimentum ultrices elit ut mattis. Praesent rhoncus tortor metus, nec pellentesque enim mattis nec. Nulla vitae turpis ut dui consectetur pellentesque quis vel est. Curabitur rutrum, mauris ut mollis lobortis, sem est congue lectus, ut sodales nunc leo a libero. Cras quis sapien in mi fringilla tempus condimentum quis velit. Aliquam id aliquam arcu. Morbi tristique aliquam rutrum. Duis tincidunt, orci suscipit cursus molestie, purus nisi pharetra dui, tempor dignissim felis turpis in mi. Vivamus ullamcorper arcu sit amet mauris egestas egestas. Vestibulum turpis neque, condimentum a tincidunt quis, molestie vel justo. Sed molestie nunc dapibus arcu feugiat, ut sollicitudin metus sagittis. Aliquam a volutpat sem. Quisque id magna ultrices, lobortis dui eget, pretium libero. Curabitur aliquam in ante eu ultricies. </div> </div> </div>
只要使用下面的3行，你的问题将得到解决：
#liaddshapes::-webkit-scrollbar { width: 0 !important; }
liaddshape是scrool来的div的名字。
HTML：
<div class="parent"> <div class="child"> </div> </div>
CSS：
.parent{ position: relative; width: 300px; height: 150px; border: 1px solid black; overflow: hidden; } .child { height: 150px; width: 318px; overflow-y: scroll; }
相应地应用CSS。
在这里检查（IE和FFtesting）。
#subparant{ overflow:hidden; width: 500px; border: 1px rgba(0,0,0,1.00) solid; } #parent{ width: 515px; height: 300px; overflow-y: auto; overflow-x: hidden; opacity:10%; } #child{ width:511px; background-color:rgba(123,8,10,0.42); } <body> <div id="subparant"> <div id="parent"> <div id="child"> <!- code here for scroll -> </div> </div> </div> </body>
function reloadScrollBars() { document.documentElement.style.overflow = 'auto'; // firefox, chrome document.body.scroll = "yes"; // ie only } function unloadScrollBars() { document.documentElement.style.overflow = 'hidden'; // firefox, chrome document.body.scroll = "no"; // ie only }
调用这些函数，任何你想要加载或卸载或重新加载滚动条的点。 Chrome浏览器仍然可以滚动，因为我在Chrome中进行了testing。 不知道其他浏览器。
如果在目前接受的答案中添加填充到内部div ，如果由于某种原因想要使用box-model: border-box ，将不起作用。
在这两种情况下工作的是增加内部div的宽度为100％加上滚动条的宽度（假设overflow: hidden在外部div上）。
例如，在CSS中：
.container2 { width: calc(100% + 19px); }
在JavaScript中，跨浏览器：
var child = document.getElementById('container2'); var addWidth = child.offsetWidth - child.clientWidth + "px"; child.style.width = 'calc(100% + ' + addWidth + ')';
这是我如何做水平滚动，只有CSS，并与框架如bootstrap / col- *很好地工作。 它只需要2个额外的div，父宽度或最大宽度设置：
如果您有触摸屏，您可以select文本使其滚动或用手指滚动。
.overflow-x-scroll-no-scrollbar {overflow:hidden;} .overflow-x-scroll-no-scrollbar div { overflow-x:hidden; margin-bottom:-17px; overflow-y:hidden; width:100%; } .overflow-x-scroll-no-scrollbar div * { overflow-x:auto; width:100%; padding-bottom:17px; white-space: nowrap; cursor:pointer } /* the following classes are only here to make the example looks nicer */ .row {width:100%} .col-xs-4 {width:33%;float:left} .col-xs-3 {width:25%;float:left} .bg-gray{background-color:#DDDDDD} .bg-orange{background-color:#FF9966} .bg-blue{background-color:#6699FF} .bg-orange-light{background-color:#FFAA88} .bg-blue-light{background-color:#88AAFF}
<html><body> <div class="row"> <div class="col-xs-4 bg-orange">Column 1</div> <div class="col-xs-3 bg-gray">Column 2</div> <div class="col-xs-4 bg-blue">Column 3</div> </div> <div class="row"> <div class="col-xs-4 bg-orange-light">Content 1</div> <div class="col-xs-3 overflow-x-scroll-no-scrollbar"> <div> <div>This content too long for the container, so it needs to be hidden but scrollable without scrollbars</div> </div> </div> <div class="col-xs-4 bg-blue-light">Content 3</div> </div> </body></html>
这将在身体：
<div id="maincontainer" > <div id="child">this is the 1st step</div> <div id="child">this is the 2nd step</div> <div id="child">this is the 3rd step</div>
这就是CSS：
#maincontainer { background:grey ; width:101%; height:101%; overflow:auto; position:fixed; } #child { background: white; height:500px; }
perfect-scrollbar插件似乎是要走的路，请参阅： https ： //github.com/noraesae/perfect-scrollbar
它是有据可查的，完整的基于JS的滚动条问题的解决scheme。
演示页面： http : //noraesae.github.io/perfect-scrollbar/
只要设置宽度的孩子的宽度为100％，填充15px，溢出X滚动和溢出：为父母隐藏，无论你想要的宽度，它完美的作品在所有主要的浏览器，包括IE浏览器边缘除IE8和降低。
这是一个divitis-esque解决scheme，这是不应该为所有浏览器工作…
标记如下，并且需要在相对定位的东西里面（并且它的宽度应该被设置，例如400px）：
<div class="hide-scrollbar"> <div class="scrollbar"> <div class="scrollbar-inner"> </div> </div> </div>
CSS：
.hide-scrollbar { overflow: hidden; position: absolute; top: 0; left: 0; right: 0; bottom: 0; } .scrollbar { overflow-y: scroll; position: absolute; top: 0; left: 0; right: -50px; bottom: 0; } .scrollbar-inner { width: 400px; }
在现代浏览器上，您可以使用wheel event https://developer.mozilla.org/en-US/docs/Web/Events/wheel
// content is the element you want to apply the wheel scroll effect content.addEventListener('wheel', function(e) { const step = 100; // how many pixels to scroll if(e.deltaY > 0 ) // scroll down content.scrollTop += step; else //scroll up content.scrollTop -= step; });
不知道我是不是晚了，但join
overflow: -moz-scrollbars-none;
为我工作
我有这个问题。 超级简单的修复。 得到两个容器 内部将是你的可滚动容器，外部显然将内部：
#inner_container { width: 102%; overflow: auto; } #outer_container { overflow: hidden }
超级简单，应该与任何浏览器。 祝你好运！
另一个简单的工作小提琴 。
#maincontainer { background: orange; width:200px; height:200px; overflow:hidden; } #childcontainer { background: yellow; position: relative; width:200px; height:200px; top:20px; left:20px; overflow:auto; }
在父容器上隐藏溢出，并在子容器上自动溢出。 简单。
