我希望能够滚动整个页面,但不显示滚动条。
在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。
当前回答
.your-overflow-scroll-class::-webkit-scrollbar {
...
width: 0.5rem; //only hide the vertical scrollbar
height: 0px; //only hide the horizontal scrollbar
}
其他回答
我的问题是:我不想在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;
}
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。
在这里检查(在Internet Explorer和Firefox中测试)。
这个帖子已经得到了很多人的回复,但我觉得它的解决方案可能会简单得多。
/* 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 */
}
更新:
Firefox现在支持使用CSS隐藏滚动条,因此所有主要浏览器(Chrome、Firefox、Internet Explorer、Safari等)都已覆盖。
只需将以下CSS应用于要删除滚动条的元素:
.container {
overflow-y: scroll;
scrollbar-width: none; /* Firefox */
-ms-overflow-style: none; /* Internet Explorer 10+ */
}
.container::-webkit-scrollbar { /* WebKit */
width: 0;
height: 0;
}
这是我目前所知的最简单的跨浏览器解决方案。查看演示。
原始答案:
这是另一种尚未提及的方式。它非常简单,只涉及两个div和CSS。不需要JavaScript或专有CSS,它适用于所有浏览器。它也不需要显式设置容器的宽度,从而使其成为流体。
此方法使用负边距将滚动条移出父级,然后使用相同的填充量将内容推回到其原始位置。该技术适用于垂直、水平和双向滚动。
演示:
竖的水平的两个方向
垂直版本的示例代码:
HTML格式:
<div class="parent">
<div class="child">
Your content.
</div>
</div>
CSS:
.parent {
width: 400px;
height: 200px;
border: 1px solid #AAA;
overflow: hidden;
}
.child {
height: 100%;
margin-right: -50px; /* Maximum width of scrollbar */
padding-right: 50px; /* Maximum width of scrollbar */
overflow-y: scroll;
}
scrollbar-width: none;
为我工作。