我希望能够滚动整个页面，但不显示滚动条。
在Google Chrome中，它是：
::-webkit-scrollbar {
display: none;
}
但Mozilla Firefox和Internet Explorer似乎不是这样工作的。
我也在CSS中尝试过：
overflow: hidden;
这确实隐藏了滚动条，但我不能再滚动了。
有没有一种方法可以删除滚动条，同时仍然可以滚动整个页面？
请只使用CSS或HTML。
当前回答
此外，所有浏览器都可以在没有滚动条的情况下滚动。
CSS
.keep-scrolling {
background-color: #EEE;
width: 200px;
height: 100px;
border: 1px dotted black;
overflow-y: scroll; /* Add the ability to scroll the y axis */
}
/* Hide the scrollbar for Chrome, Safari and Opera */
.keep-scrolling::-webkit-scrollbar {
display: none;
}
/* Hide the scrollbar for Internet Explorer, Edge and Firefox */
.keep-scrolling {
-ms-overflow-style: none; /* Internet Explorer and Edge */
scrollbar-width: none; /* Firefox */
}
SCSS
.keep-scrolling {
background-color: #EEE;
width: 200px;
height: 100px;
border: 1px dotted black;
overflow-y: scroll; /* Add the ability to scroll the y axis */
/* Hide the scrollbar for Internet Explorer, Edge and Firefox */
-ms-overflow-style: none; /* Internet Explorer and Edge */
scrollbar-width: none; /* Firefox */
/* Hide the scrollbar for Chrome, Safari and Opera */
&::-webkit-scrollbar {
display: none;
}
}
HTML
<div class="keep-scrolling">
</div>
其他回答
在现代浏览器上，您可以使用wheel事件：
// Content is the element you want to apply the wheel scroll effect to
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;
});
我的问题是：我不想在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;
}
这对我有用：
scroll-content {
overflow-x: hidden;
overflow-y: scroll;
}
scroll-content::-webkit-scrollbar {
width: 0;
}
要隐藏内容溢出的元素的滚动条，请使用。
.div{
scrollbar-width: none; /* The most elegant way for Firefox */
}
这个棘手的解决方案甚至可以在旧的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
