CSS可以用来隐藏滚动条吗?你会怎么做?


当前回答

隐藏滚动条的跨浏览器方法。

它在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;
}

其他回答

我只是想告诉其他读到这个问题的人,在body元素上设置overflow:hidden(或overflow-y)并没有为我隐藏滚动条。

我不得不使用html元素。

如果您正在寻找隐藏移动设备滚动条的解决方案,请遵循Peter的答案!

这里有一个jsfiddle,它使用下面的解决方案隐藏水平滚动条。

.scroll-wrapper{
    overflow-x: scroll;
}
.scroll-wrapper::-webkit-scrollbar { 
    display: none; 
}

它在搭载Android 4.0.4的三星平板电脑(冰淇淋三明治,在本机浏览器和Chrome浏览器中)和搭载iOS 6的iPad(在Safari和Chrome浏览器)上进行了测试。

我相信您可以使用溢出CSS属性来操作它,但他们的浏览器支持有限。一位消息人士表示,它是Internet Explorer 5(及更高版本)、Firefox 1.5(及更新版本)和Safari 3(及更晚版本)——也许足以满足您的需求。

滚动,滚动,滚动有很好的讨论。

要禁用垂直滚动条,只需添加overflow-y:hidden;。

了解更多信息:溢出。

正如其他人已经说过的,使用CSS溢出。

但如果您仍然希望用户能够滚动该内容(滚动条不可见),则必须使用JavaScript。

在这里回答我的问题:隐藏滚动条,同时仍然可以使用鼠标/键盘滚动