CSS可以用来隐藏滚动条吗?你会怎么做?
当前回答
如果您正在寻找隐藏移动设备滚动条的解决方案,请遵循Peter的答案!
这里有一个jsfiddle,它使用下面的解决方案隐藏水平滚动条。
.scroll-wrapper{
overflow-x: scroll;
}
.scroll-wrapper::-webkit-scrollbar {
display: none;
}
它在搭载Android 4.0.4的三星平板电脑(冰淇淋三明治,在本机浏览器和Chrome浏览器中)和搭载iOS 6的iPad(在Safari和Chrome浏览器)上进行了测试。
其他回答
即使溢出,我的答案也会滚动:隐藏;,使用jQuery:
例如,使用鼠标滚轮水平滚动:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type='text/javascript' src='/js/jquery.mousewheel.min.js'></script>
<script type="text/javascript">
$(function() {
$("YourSelector").mousewheel(function(event, delta) {
this.scrollLeft -= (delta * 30);
event.preventDefault();
});
});
</script>
我编写了一个WebKit版本,其中包含一些选项,如自动隐藏、小版本、仅滚动-y或仅滚动-x:
._scrollable{
@size: 15px;
@little_version_ratio: 2;
@scrollbar-bg-color: rgba(0,0,0,0.15);
@scrollbar-handler-color: rgba(0,0,0,0.15);
@scrollbar-handler-color-hover: rgba(0,0,0,0.3);
@scrollbar-coner-color: rgba(0,0,0,0);
overflow-y: scroll;
overflow-x: scroll;
-webkit-overflow-scrolling: touch;
width: 100%;
height: 100%;
&::-webkit-scrollbar {
background: none;
width: @size;
height: @size;
}
&::-webkit-scrollbar-track {
background-color:@scrollbar-bg-color;
border-radius: @size;
}
&::-webkit-scrollbar-thumb {
border-radius: @size;
background-color:@scrollbar-handler-color;
&:hover{
background-color:@scrollbar-handler-color-hover;
}
}
&::-webkit-scrollbar-corner {
background-color: @scrollbar-coner-color;
}
&.little{
&::-webkit-scrollbar {
background: none;
width: @size / @little_version_ratio;
height: @size / @little_version_ratio;
}
&::-webkit-scrollbar-track {
border-radius: @size / @little_version_ratio;
}
&::-webkit-scrollbar-thumb {
border-radius: @size / @little_version_ratio;
}
}
&.autoHideScrollbar{
overflow-x: hidden;
overflow-y: hidden;
&:hover{
overflow-y: scroll;
overflow-x: scroll;
-webkit-overflow-scrolling: touch;
&.only-y{
overflow-y: scroll !important;
overflow-x: hidden !important;
}
&.only-x{
overflow-x: scroll !important;
overflow-y: hidden !important;
}
}
}
&.only-y:not(.autoHideScrollbar){
overflow-y: scroll !important;
overflow-x: hidden !important;
}
&.only-x:not(.autoHideScrollbar){
overflow-x: scroll !important;
overflow-y: hidden !important;
}
}
http://codepen.io/hicTech/pen/KmKrjb
这是我的解决方案,理论上涵盖了所有现代浏览器:
html {
scrollbar-width: none; /* For Firefox */
-ms-overflow-style: none; /* For Internet Explorer and Edge */
}
html::-webkit-scrollbar {
width: 0px; /* For Chrome, Safari, and Opera */
}
html可以替换为任何想要隐藏滚动条的元素。
注意:我已经浏览了其他19个答案,看看我发布的代码是否已经被覆盖,似乎没有一个答案能概括2019年的情况,尽管其中很多都非常详细。如果这是别人说的,而我错过了,我深表歉意。
将此CSS代码复制到隐藏滚动条的客户代码:
<style>
::-webkit-scrollbar {
display: none;
}
#element::-webkit-scrollbar {
display: none;
}
</style>
您可以使用隐藏溢出的包装器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;
}