我希望能够滚动整个页面,但不显示滚动条。
在Google Chrome中,它是:
::-webkit-scrollbar {
display: none;
}
但Mozilla Firefox和Internet Explorer似乎不是这样工作的。
我也在CSS中尝试过:
overflow: hidden;
这确实隐藏了滚动条,但我不能再滚动了。
有没有一种方法可以删除滚动条,同时仍然可以滚动整个页面?
请只使用CSS或HTML。
我希望能够滚动整个页面,但不显示滚动条。
在Google Chrome中,它是:
::-webkit-scrollbar {
display: none;
}
但Mozilla Firefox和Internet Explorer似乎不是这样工作的。
我也在CSS中尝试过:
overflow: hidden;
这确实隐藏了滚动条,但我不能再滚动了。
有没有一种方法可以删除滚动条,同时仍然可以滚动整个页面?
请只使用CSS或HTML。
当前回答
我的问题是:我不想在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;
}
其他回答
另一种黑客方法是执行overflow-y:hidden,然后手动滚动元素,如下所示:
function detectMouseWheelDirection(e) {
var delta = null, direction = false;
if (!e) { // If the event is not provided, we get it from the window object
e = window.event;
}
if (e.wheelDelta) { // Will work in most cases
delta = e.wheelDelta / 60;
} else if (e.detail) { // Fallback for Firefox
delta = -e.detail / 2;
}
if (delta !== null) {
direction = delta > 0 ? -200 : 200;
}
return direction;
}
if (element.addEventListener) {
element.addEventListener('DOMMouseScroll', function(e) {
element.scrollBy({
top: detectMouseWheelDirection(e),
left: 0,
behavior: 'smooth'
});
});
}
deepmikoto的博客中有一篇关于如何检测和处理onmousewheel事件的精彩文章。这可能对你有用,但绝对不是一个优雅的解决方案。
这将在正文中:
<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;
}
Use:
<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溢出样式:-ms自动隐藏滚动条;或-ms溢出样式:无;根据MSDN。
Firefox没有同等的功能。尽管有一个jQuery插件来实现这一点,http://manos.malihu.gr/tuts/jquery_custom_scrollbar.html
这适用于我的跨浏览器。然而,这不会在移动浏览器上隐藏本机滚动条。
在SCSS中
.hide-native-scrollbar {
scrollbar-width: none; /* Firefox 64 */
-ms-overflow-style: none; /* Internet Explorer 11 */
&::-webkit-scrollbar { /** WebKit */
display: none;
}
}
在CSS中
.hide-native-scrollbar {
scrollbar-width: none; /* Firefox 64 */
-ms-overflow-style: none; /* Internet Explorer 11 */
}
.hide-native-scrollbar::-webkit-scrollbar { /** WebKit */
display: none;
}
这对我来说适用于简单的CSS财产:
.container {
-ms-overflow-style: none; /* Internet Explorer 10+ */
scrollbar-width: none; /* Firefox */
}
.container::-webkit-scrollbar {
display: none; /* Safari and Chrome */
}
对于旧版本的Firefox,请使用:overflow:-moz滚动条none;