CSS可以用来隐藏滚动条吗?你会怎么做?
当前回答
我的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%;
}
其他回答
隐藏滚动条的跨浏览器方法。
它在Edge、Chrome、Firefox和Safari上进行了测试
隐藏滚动条,同时仍然可以使用鼠标滚轮滚动!
代码笔
/* Make parent invisible */
#parent {
visibility: hidden;
overflow: scroll;
}
/* Safari and Chrome specific style. Don't need to make parent invisible, because we can style WebKit scrollbars */
#parent:not(*:root) {
visibility: visible;
}
/* Make Safari and Chrome scrollbar invisible */
#parent::-webkit-scrollbar {
visibility: hidden;
}
/* Make the child visible */
#child {
visibility: visible;
}
使用CSS溢出属性:
.noscroll {
width: 150px;
height: 150px;
overflow: auto; /* Or hidden, or visible */
}
以下是更多示例:
溢出-x,溢出-y测试CSS溢出属性
正如其他人已经说过的,使用CSS溢出。
但如果您仍然希望用户能够滚动该内容(滚动条不可见),则必须使用JavaScript。
在这里回答我的问题:隐藏滚动条,同时仍然可以使用鼠标/键盘滚动
我的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%;
}
如果您正在寻找隐藏移动设备滚动条的解决方案,请遵循Peter的答案!
这里有一个jsfiddle,它使用下面的解决方案隐藏水平滚动条。
.scroll-wrapper{
overflow-x: scroll;
}
.scroll-wrapper::-webkit-scrollbar {
display: none;
}
它在搭载Android 4.0.4的三星平板电脑(冰淇淋三明治,在本机浏览器和Chrome浏览器中)和搭载iOS 6的iPad(在Safari和Chrome浏览器)上进行了测试。