我希望能够滚动整个页面，但不显示滚动条。
在Google Chrome中，它是：
::-webkit-scrollbar {
display: none;
}
但Mozilla Firefox和Internet Explorer似乎不是这样工作的。
我也在CSS中尝试过：
overflow: hidden;
这确实隐藏了滚动条，但我不能再滚动了。
有没有一种方法可以删除滚动条，同时仍然可以滚动整个页面？
请只使用CSS或HTML。
当前回答
以下内容适用于我在Microsoft、Chrome和Mozilla上的特定div元素：
div.rightsidebar {
overflow-y: auto;
scrollbar-width: none;
-ms-overflow-style: none;
}
div.rightsidebar::-webkit-scrollbar {
width: 0 !important;
}
其他回答
这将在正文中：
<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>
</div>
这是CSS：
#maincontainer
{
background: grey;
width: 101%;
height: 101%;
overflow: auto;
position: fixed;
}
#child
{
background: white;
height: 500px;
}
隐藏水平和垂直滚动条。
请在此处查看Fiddle
HTML
<div id="container1">
<div id="container2">
<pre>
Select from left and drag to right to scroll this very long sentence. This should not show scroll bar at bottom or on the side. Keep scrolling .......... ............ .......... ........... This Fiddle demonstrates that scrollbar can be hidden. ..... ..... ..... .....
</pre>
</div>
<div>
CSS
* {
margin: 0;
}
#container1 {
height: 50px;
width: 100%;
overflow: hidden;
position: relative;
}
#container2 {
position: absolute;
top: 0px;
bottom: -15px;
left: 0px;
right: -15px;
overflow: auto;
}
我只是想分享一个组合片段，用于隐藏开发时使用的滚动条。这是一组在互联网上找到的对我有用的片段：
.container {
overflow-x: scroll; /* For horiz. scroll, otherwise overflow-y: scroll; */
-ms-overflow-style: none;
overflow: -moz-scrollbars-none;
scrollbar-width: none;
}
.container::-webkit-scrollbar {
display: none; /* Safari and Chrome */
}
这个棘手的解决方案甚至可以在旧的Internet Explorer web浏览器上使用。
这是[垂直滚动条]的变通方法
<html>
<head>
<style>
html,
body {
overflow: -moz-scrollbars-vertical;
overflow-x: hidden;
overflow-y: hidden;
height: 100%;
margin: 0;
}
</style>
</head>
<body id="body" style="overflow:auto;height:100%" onload="document.getElementById('body').style.width=document.body.offsetWidth+20+'px'">
<!--your stuff here-->
</body>
</html>
试试看：jsfiddle
这个帖子已经得到了很多人的回复，但我觉得它的解决方案可能会简单得多。
/* Hide scrollbar for Chrome, Safari and Opera */
.container::-webkit-scrollbar {
display: none;
}
/* Hide scrollbar for Internet Explorer, Edge and Firefox */
.container {
-ms-overflow-style: none; /* Internet Explorer and Edge */
scrollbar-width: none; /* Firefox */
}
}
注意：上面的方法只会删除滚动条的可见性，但它仍然可以正常工作。如果您想删除滚动功能，则可以使用以下选项：
container {
overflow-y: hidden; /* Hide vertical scrollbar */
overflow-x: hidden; /* Hide horizontal scrollbar */
}
