Question

所以目前我有：

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

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

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

Answer 1

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

根据需要自定义外观。 Source

Answer 2

请注意在iPad Safari上，如果您在CSS中的某个地方{ - 1}}，NoviceCoding的解决方案将无效。解决方案是删除所有webkit-overflow-scrolling: touch;或-webkit-overflow-scrolling: touch; NoviceCoding的解决方案。

Answer 3

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

此外，还有一个duplicate post here on Stack Overflow，其中包含其他一些细节。

Answer 4

尝试以下代码以始终在页面上显示滚动条，

::-webkit-scrollbar {
  -webkit-appearance: none;
  width: 10px;
}

::-webkit-scrollbar-thumb {
  border-radius: 5px;
  background-color: rgba(0,0,0,.5);
  -webkit-box-shadow: 0 0 1px rgba(255,255,255,.5);
}

这将始终在页面上显示垂直和水平滚动条。如果只需要垂直滚动条，请放overflow-x: hidden

Answer 5

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

"Custom scrollbars are no longer supported in iOS 14."

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

Answer 6

当窗口中的内容必须滚动才能访问时，这将使滚动条始终显示，它适用于Mac上的所有窗口和所有应用程序：

从Apple菜单启动系统偏好设置单击“常规”设置面板寻找'显示滚动条'并选择“始终”旁边的无线电排列完成后关闭系统偏好设置

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

6 个答案: