我希望能够滚动整个页面,但不显示滚动条。
在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。
当前回答
您可以使用下面的代码隐藏滚动条,但仍可以滚动:
.element::-webkit-scrollbar {
width: 0 !important
}
其他回答
这将在正文中:
<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;
}
以下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;
}
}
这对我有用
div {
-ms-overflow-style: none; /* Edge, Internet Explorer */
scrollbar-width: none; /* Firefox */
overflow-y: scroll;
}
// hides scrollbars while allowing to scroll
div::-webkit-scrollbar {
display: none; /* Chrome, Safari, Opera */
}
scrollbar-width: none;
为我工作。
我遇到了这个问题,解决起来非常简单。
取两个容器。内部将是可滚动的容器,外部显然将容纳内部:
#inner_container { width: 102%; overflow: auto; }
#outer_container { overflow: hidden }
它非常简单,适用于任何浏览器。