我希望能够滚动整个页面,但不显示滚动条。
在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。
当前回答
此外,所有浏览器都可以在没有滚动条的情况下滚动。
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>
其他回答
截至2018年12月11日(Firefox 64及以上版本),这个问题的答案非常简单,因为Firefox 64+现在实现了CSS滚动条样式规范。
只需使用以下CSS:
scrollbar-width: none;
Firefox 64发布说明链接在此。
这是一个类似于divitis的解决方案,所有浏览器都可以使用它。。。
标记如下所示,需要位于具有相对定位的内部(其宽度应设置为400像素):
<div class="hide-scrollbar">
<div class="scrollbar">
<div class="scrollbar-inner">
</div>
</div>
</div>
CSS:
.hide-scrollbar {
overflow: hidden;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.scrollbar {
overflow-y: scroll;
position: absolute;
top: 0;
left: 0;
right: -50px;
bottom: 0;
}
.scrollbar-inner {
width: 400px;
}
您可以使用下面的代码隐藏滚动条,但仍可以滚动:
.element::-webkit-scrollbar {
width: 0 !important
}
只需使用以下三行,您的问题就会得到解决:
#liaddshapes::-webkit-scrollbar {
width: 0 !important;
}
其中liaddshapes是要滚动的div的名称。
我知道这是一个非常古老的问题,但这里有一个仅使用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;
}