我希望能够滚动整个页面，但不显示滚动条。
在Google Chrome中，它是：
::-webkit-scrollbar {
display: none;
}
但Mozilla Firefox和Internet Explorer似乎不是这样工作的。
我也在CSS中尝试过：
overflow: hidden;
这确实隐藏了滚动条，但我不能再滚动了。
有没有一种方法可以删除滚动条，同时仍然可以滚动整个页面？
请只使用CSS或HTML。
当前回答
要隐藏内容溢出的元素的滚动条，请使用。
.div{
scrollbar-width: none; /* The most elegant way for Firefox */
}
其他回答
在WebKit中使用可选样式很简单：
html {
overflow: scroll;
overflow-x: hidden;
}
::-webkit-scrollbar {
width: 0; /* Remove scrollbar space */
background: transparent; /* Optional: just make scrollbar invisible */
}
/* Optional: show position indicator in red */
::-webkit-scrollbar-thumb {
background: #FF0000;
}
这个棘手的解决方案甚至可以在旧的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
您可以使用下面的代码隐藏滚动条，但仍可以滚动：
.element::-webkit-scrollbar {
width: 0 !important
}
我的问题是：我不想在HTML内容中使用任何样式。我希望我的身体可以直接滚动，没有任何滚动条，只有一个垂直滚动，可以使用CSS网格来适应任何屏幕大小。
框大小调整值影响填充或边距解决方案，它们与框大小调整一起工作：内容框。
我仍然需要“-moz scrollbars none”指令，像gdoron和Mr_Green一样，我必须隐藏滚动条。我尝试了-moz转换和-moz填充启动，只影响Firefox，但有一些响应性的副作用需要做太多的工作。
此解决方案适用于具有“display:grid”样式的HTML正文内容，并且具有响应性。
/* Hide HTML and body scroll bar in CSS grid context */
html, body {
position: static; /* Or relative or fixed ... */
box-sizing: content-box; /* Important for hidding scrollbar */
display: grid; /* For CSS grid */
/* Full screen */
width: 100vw;
min-width: 100vw;
max-width: 100vw;
height: 100vh;
min-height: 100vh;
max-height: 100vh;
margin: 0;
padding: 0;
}
html {
-ms-overflow-style: none; /* Internet Explorer 10+ */
overflow: -moz-scrollbars-none; /* Should hide the scroll bar */
}
/* No scroll bar for Safari and Chrome */
html::-webkit-scrollbar,
body::-webkit-scrollbar {
display: none; /* Might be enough */
background: transparent;
visibility: hidden;
width: 0px;
}
/* Firefox only workaround */
@-moz-document url-prefix() {
/* Make HTML with overflow hidden */
html {
overflow: hidden;
}
/* Make body max height auto */
/* Set right scroll bar out the screen */
body {
/* Enable scrolling content */
max-height: auto;
/* 100vw +15px: trick to set the scroll bar out the screen */
width: calc(100vw + 15px);
min-width: calc(100vw + 15px);
max-width: calc(100vw + 15px);
/* Set back the content inside the screen */
padding-right: 15px;
}
}
body {
/* Allow vertical scroll */
overflow-y: scroll;
}
只需使用以下三行，您的问题就会得到解决：
#liaddshapes::-webkit-scrollbar {
width: 0 !important;
}
其中liaddshapes是要滚动的div的名称。
