CSS可以用来隐藏滚动条吗?你会怎么做?
当前回答
要禁用垂直滚动条,只需添加overflow-y:hidden;。
了解更多信息:溢出。
其他回答
除了彼得的回答:
#element::-webkit-scrollbar {
display: none;
}
这对Internet Explorer 10的作用相同:
#element {
-ms-overflow-style: none;
}
要禁用垂直滚动条,只需添加overflow-y:hidden;。
了解更多信息:溢出。
您可以使用隐藏溢出的包装器div,并将内部div设置为auto来实现这一点。
要删除内部div的滚动条,可以通过对内部div应用负边距将其从外部div的视口中拉出。然后对内部div使用相等的填充,以使内容保持在视图中。
JSFiddle公司
###HTML格式
<div class="hide-scroll">
<div class="viewport">
...
</div>
</div>
###CSS格式
.hide-scroll {
overflow: hidden;
}
.viewport {
overflow: auto;
/* Make sure the inner div is not larger than the container
* so that we have room to scroll.
*/
max-height: 100%;
/* Pick an arbitrary margin/padding that should be bigger
* than the max scrollbar width across the devices that
* you are supporting.
* padding = -margin
*/
margin-right: -100px;
padding-right: 100px;
}
我只是想告诉其他读到这个问题的人,在body元素上设置overflow:hidden(或overflow-y)并没有为我隐藏滚动条。
我不得不使用html元素。
将此CSS代码复制到隐藏滚动条的客户代码:
<style>
::-webkit-scrollbar {
display: none;
}
#element::-webkit-scrollbar {
display: none;
}
</style>