CSS - 溢出：滚动； - 总是显示垂直滚动条？答案

【问题标题】：CSS - Overflow: Scroll; - Always show vertical scroll bar?CSS - 溢出：滚动； - 总是显示垂直滚动条？
【发布时间】：2011-11-21 11:12:04
【问题描述】：

所以目前我有：

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

但是，我不认为某些用户会明显看出那里有更多内容。他们可以在不知道我的 div 实际上包含更多内容的情况下向下滚动页面。我使用高度 510px 来截断一些文本，因此在某些页面上看起来确实有更多内容，但这并不适用于所有页面。

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

【问题讨论】：

嗯，你能在jsfiddle 上重现这种行为吗？您提供的 css 应该强制滚动条一直存在。
是的，听起来你有一些其他的 CSS 怪癖会导致这种情况，这应该总是显示滚动条。确保 div 包装这个的样式正确。
我正在运行 Lion！也许就是这样？我会打开一个虚拟机，看看它在windows方面是什么样的......
该死，我的错！这是 Lion 中的一个功能。我真的应该在购买之前阅读我要购买的东西......谢谢大家！

标签： css macos scroll overflow

【解决方案1】：

我自己也遇到了这个问题。 OSx Lion 在不使用时隐藏滚动条以使其看起来更“光滑”，但同时出现了您解决的问题：人们有时看不到 div 是否具有滚动功能。

修复：在你的 css 中包含 -

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

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

/* always show scrollbars */

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

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


/* css for demo */

#container {
  height: 4em;
  /* shorter than the child */
  overflow-y: scroll;
  /* clip height to 4em and scroll to show the rest */
}

#child {
  height: 12em;
  /* taller than the parent to force scrolling */
}


/* === ignore stuff below, it's just to help with the visual. === */

#container {
  background-color: #ffc;
}

#child {
  margin: 30px;
  background-color: #eee;
  text-align: center;
}

<div id="container">
  <div id="child">Example</div>
</div>

根据需要自定义外观。 Source

【讨论】：

这是否也适用于带有 Safari 的 iPad？我在运行 iOS 6.1.3 的 iPad 2 上，但它不工作。
有没有办法让它只适用于特定的班级？
@futbolpal 是的，这似乎在课堂上有效；试试 .classname ::-webkit-scrollbar
我怎样才能让它水平工作？ bar 显示为垂直滚动，但不是水平滚动
效果很好。如果您不想要一个非常粗的水平滚动条，请将height 添加到::-webkit-scrollbar

【解决方案2】：

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

【讨论】：

是否可以在我们的 css 中同时拥有 - webkit-overflow-scrolling: touch 和滚动条？

【解决方案3】：

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

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

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

【讨论】：

【解决方案4】：

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

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

【讨论】：

请注意，这个问题是在 2 年前提出的，当时 iOS6 还没有出现。
webkit 仅适用于 safari chrome。您需要针对 Firefox 特定的引擎

【解决方案5】：

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

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

【讨论】：

这确实回答了这个问题，但它是客户端修复而不是服务器端修复。所以这是网页用户必须做的事情，stackoverflow 是一个编程网站，所以人们通常来这里寻找代码解决方案，而不是用户更改浏览器设置的方式。