it-swarm.cn

CSS - 溢出:滚动; - 始终显示垂直滚动条?

所以目前我有:

#div {
  position: relative;
  height: 510px;
  overflow-y: scroll;
}

但是我不相信某些用户会明白那里有更多的内容。他们可以在不知道我的div实际上包含更多内容的情况下向下滚动页面。我使用高度510px,以便它切断一些文本,所以在某些页面上看起来确实有更多内容,但这并不适用于所有这些内容。

我正在使用Mac,而在Chrome和Safari中,垂直滚动条只会在鼠标悬停在Div上时显示,并且您会主动滚动。有没有办法让它一直显示?

190
Jambo

我自己遇到了这个问题。 OSx Lion隐藏滚动条而不使用滚动条使它看起来更“光滑”,但与此同时你遇到的问题出现了:人们有时无法看到div是否具有滚动功能。

修复:在你的CSS包括 -

@media(device-width: 768px) and (device-height: 1024px){
    ::-webkit-scrollbar {
        -webkit-appearance: none;
        width: 7px;
    }
    ::-webkit-scrollbar-thumb {
        border-radius: 4px;
        background-color: rgba(0,0,0,.5);
        -webkit-box-shadow: 0 0 1px rgba(255,255,255,.5);
    }
}

根据需要自定义外观。 资源

332
NoviceCoding

请注意在iPad Safari上,如果你的CSS中某处有-webkit-overflow-scrolling: touch;,NoviceCoding的解决方案将无效。解决方案是删除所有出现的-webkit-overflow-scrolling: touch;或使用NoviceCoding的解决方案放置-webkit-overflow-scrolling: auto;

12
Razan Paul

这将适用于我在测试中在iOS 7.1.x上的Safari上的iPad,但我不确定iOS 6。但是,它不适用于Firefox。有一个jQuery插件,旨在跨浏览器兼容称为 jScrollPane

此外,Stack Overflow上有一个 重复的帖子 还有其他一些细节。

0
JStarcher