CSS – 溢出：滚动; – 总是显示垂直滚动条？

所以目前我有：

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

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

我使用的是Mac，在Chrome和Safari中，垂直滚动条仅在鼠标hover在Div上时显示，并且您正在进行滚动。 有没有办法让它始终显示？

Answer 1

刚刚遇到这个问题，我自己。 OSx Lion在未使用时会隐藏滚动条，使其看起来更“光滑”，但同时出现的问题是：人们有时无法看到div是否具有滚动function。

修复：在你的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); } } 

根据需要定制外观。 资源

Answer 2

请注意，在iPad Safari上，如果您有webkit-overflow-scrolling: touch; ，则NoviceCoding的解决scheme将不起作用webkit-overflow-scrolling: touch; 在你的CSS的某处。 解决scheme是要么删除所有出现的-webkit-overflow-scrolling: touch; 或者把-webkit-overflow-scrolling: auto; 与NoviceCoding的解决scheme。

Answer 3

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

此外， 在Stack Overflow上有一个重复的post，里面有一些其他的细节。

Answer 4

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

从Apple菜单启动系统偏好设置单击“常规”设置面板查找“显示滚动条”并select“总是”旁边的无线电框当完成时closures系统偏好设置