我希望能够滚动整个页面,但不显示滚动条。
在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。
当前回答
在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;
}
其他回答
使用此选项可以隐藏滚动条,但保留功能:
.example::-webkit-scrollbar {
display: none;
}
隐藏IE、Edge和Firefox的滚动条
.example {
-ms-overflow-style: none; /* IE and Edge */
scrollbar-width: none; /* Firefox */
}
我遇到了这个问题,解决起来非常简单。
取两个容器。内部将是可滚动的容器,外部显然将容纳内部:
#inner_container { width: 102%; overflow: auto; }
#outer_container { overflow: hidden }
它非常简单,适用于任何浏览器。
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中测试)。
您可以使用下面的代码隐藏滚动条,但仍可以滚动:
.element::-webkit-scrollbar {
width: 0 !important
}
我知道这是一个非常古老的问题,但这里有一个仅使用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;
}