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

Question

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

所以目前我有:

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

Run Code Online (Sandbox Code Playgroud)

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

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

Answer 1

Nov*_*ing 353

我自己遇到了这个问题.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);
    }
}

Run Code Online (Sandbox Code Playgroud)

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

@futbolpal是的,这似乎在一个班级工作; 尝试.classname :: - webkit-scrollbar (8认同)
这应该也适用于带Safari的iPad吗？我在运行iOS 6.1.3的iPad 2上运行它不起作用. (6认同)
有没有办法让这个只适用于特定的课程？ (6认同)
我怎么能让这个水平工作？条形显示垂直滚动但不显示水平滚动 (4认同)
只有在我在容器上设置'overflow:auto'后才能为我工作(在我的例子中,是<ul>).谢谢! (2认同)
适用于 OSX Safari，但不适用于 iPad Safari ;( (2认同)
在 OSX 10.11.6 上：适用于 Chrome 62 和 Safari 10.1.2。在 Firefox 57 中不起作用。 (2认同)
效果很好。如果您不想要非常粗的水平滚动条，请将“height”添加到“::-webkit-scrollbar” (2认同)

Answer 2

Gre*_*sky 26

对于 2021 年及以后来到这里的任何人：

“iOS 14 不再支持自定义滚动条。”

根据developer.apple.com 论坛上的一位官方“框架工程师”的说法。

@MichaelTerry 在 Chrome 中是的。在 Safari 和 Firefox 中，没有。 (2认同)

Answer 3

Raz*_*aul 13

请注意在iPad Safari上,NoviceCoding的解决方案如果你有 - webkit-overflow-scrolling: touch;在CSS的某个地方也行不通.解决方案是删除所有出现的-webkit-overflow-scrolling: touch;或-webkit-overflow-scrolling: auto;使用NoviceCoding的解决方案.

是否可以在我们的css中使用 - webkit-overflow-scrolling:touch和滚动条？ (3认同)

归档时间：	14 年，2 月前
查看次数：	228195 次
最近记录：	8 年，2 月前