我希望能够滚动整个页面,但不显示滚动条。
在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。
当前回答
以下内容适用于我在Microsoft、Chrome和Mozilla上的特定div元素:
div.rightsidebar {
overflow-y: auto;
scrollbar-width: none;
-ms-overflow-style: none;
}
div.rightsidebar::-webkit-scrollbar {
width: 0 !important;
}
其他回答
只需将子对象的宽度设置为100%,将填充设置为15像素,将overflow-x设置为滚动和溢出:为父对象隐藏,并设置您想要的宽度。
它适用于所有主要浏览器,包括Internet Explorer和Edge,但Internet Explorer 8及更低版本除外。
此外,所有浏览器都可以在没有滚动条的情况下滚动。
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>
您可以使用下面的代码隐藏滚动条,但仍可以滚动:
.element::-webkit-scrollbar {
width: 0 !important
}
这对我有用
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 */
}
.className::-webkit-scrollbar{
display: none;
}
除了“溢出”之外,你写的所有内容都是正确的。适用于Chrome和其他浏览器的webkit
overflow-y: scroll;
or
overflow-y: auto;
对于Firefox和Edge
scrollbar-width: none;
or
scrollbar-width: thin;