CSS可以用来隐藏滚动条吗?你会怎么做?
当前回答
即使溢出,我的答案也会滚动:隐藏;,使用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>
其他回答
使用CSS溢出属性:
.noscroll {
width: 150px;
height: 150px;
overflow: auto; /* Or hidden, or visible */
}
以下是更多示例:
溢出-x,溢出-y测试CSS溢出属性
如果您正在寻找隐藏移动设备滚动条的解决方案,请遵循Peter的答案!
这里有一个jsfiddle,它使用下面的解决方案隐藏水平滚动条。
.scroll-wrapper{
overflow-x: scroll;
}
.scroll-wrapper::-webkit-scrollbar {
display: none;
}
它在搭载Android 4.0.4的三星平板电脑(冰淇淋三明治,在本机浏览器和Chrome浏览器中)和搭载iOS 6的iPad(在Safari和Chrome浏览器)上进行了测试。
这是我的解决方案,理论上涵盖了所有现代浏览器:
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年的情况,尽管其中很多都非常详细。如果这是别人说的,而我错过了,我深表歉意。
我只是想告诉其他读到这个问题的人,在body元素上设置overflow:hidden(或overflow-y)并没有为我隐藏滚动条。
我不得不使用html元素。
CSS可以用来隐藏滚动条吗?你会怎么做?
如果要从浏览器视口中删除垂直(和水平)滚动条,请添加:
style="position: fixed;"
到<body>元素。
Java脚本:
document.body.style.position = 'fixed';
CSS:
body {
position: fixed;
}