我希望能够滚动整个页面,但不显示滚动条。
在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。
当前回答
这适用于我的跨浏览器。然而,这不会在移动浏览器上隐藏本机滚动条。
在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
.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>
在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;
}
我知道这是一个非常古老的问题,但这里有一个仅使用HTML和CSS的跨浏览器解决方案。
HTML格式:
<div class="barrel">
<div class="clipper">
<p class="clippercontent">Lorem</p>
</div>
<div id='navcontainer'>
<p class="navcontent" >I want to be able to scroll through the whole page, but without the scrollbar being shown. Is there a way I can remove the scrollbar while still being able to scroll the whole page? With just CSS or HTML, please.
</p>
</div>
</div>
原则:#navcontainer将容纳我们的.navcontent,并将有滚动条。barrel将隐藏#navcontainer的滚动条。
CSS:
.barrel{
border: 0.8px solid #110011;
position: relative;
overflow: hidden;
}
.barrel #navcontainer{
overflow: scroll; overflow-y: hidden;
position: absolute;/* absolute positioned contents will not affect their parents */
top: 0; left: 0; right: 0;
white-space: nowrap;
}
/* style .clipper and .clippercontent, as a structural-image of #navcontainer and .navcontent respectively This will help .barrel have the same height as the #navcontainer */
.barrel .clipper{
overflow: hidden;
width: 0px;
white-space: nowrap;
}
.navcontent, .clippercontent{
padding: 3px 1px;
}
截至2018年12月11日(Firefox 64及以上版本),这个问题的答案非常简单,因为Firefox 64+现在实现了CSS滚动条样式规范。
只需使用以下CSS:
scrollbar-width: none;
Firefox 64发布说明链接在此。
以下Sass样式应使滚动条在大多数浏览器上透明(不支持Firefox):
.hide-scrollbar {
scrollbar-width: thin;
scrollbar-color: transparent transparent;
&::-webkit-scrollbar {
width: 1px;
}
&::-webkit-scrollbar-track {
background: transparent;
}
&::-webkit-scrollbar-thumb {
background-color: transparent;
}
}