CSS可以用来隐藏滚动条吗?你会怎么做?
当前回答
除了彼得的回答:
#element::-webkit-scrollbar {
display: none;
}
这对Internet Explorer 10的作用相同:
#element {
-ms-overflow-style: none;
}
其他回答
即使溢出,我的答案也会滚动:隐藏;,使用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>
我的HTML是这样的:
<div class="container">
<div class="content">
</div>
</div>
将其添加到要隐藏滚动条的div中:
.content {
position: absolute;
right: -100px;
overflow-y: auto;
overflow-x: hidden;
height: 75%; /* This can be any value of your choice */
}
并将其添加到容器中
.container {
overflow-x: hidden;
max-height: 100%;
max-width: 100%;
}
正如其他人已经说过的,使用CSS溢出。
但如果您仍然希望用户能够滚动该内容(滚动条不可见),则必须使用JavaScript。
在这里回答我的问题:隐藏滚动条,同时仍然可以使用鼠标/键盘滚动
CSS可以用来隐藏滚动条吗?你会怎么做?
如果要从浏览器视口中删除垂直(和水平)滚动条,请添加:
style="position: fixed;"
到<body>元素。
Java脚本:
document.body.style.position = 'fixed';
CSS:
body {
position: fixed;
}
我只是想告诉其他读到这个问题的人,在body元素上设置overflow:hidden(或overflow-y)并没有为我隐藏滚动条。
我不得不使用html元素。