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


当前回答

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

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

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

其他回答

如果你们还感兴趣的话,我想我为你们找到了一个变通办法。这是我的第一个星期,但这对我很有用。。。

<div class="contentScroller">
    <div class="content">
    </div>
</div>

.contentScroller {overflow-y: auto; visibility: hidden;}
.content {visibility: visible;}

使用CSS溢出属性:

.noscroll {
  width: 150px;
  height: 150px;
  overflow: auto; /* Or hidden, or visible */
}

以下是更多示例:

溢出-x,溢出-y测试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;
}

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

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

将此CSS代码复制到隐藏滚动条的客户代码:

<style>

    ::-webkit-scrollbar {
       display: none;
    }

    #element::-webkit-scrollbar {
       display: none;
    }

</style>