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

Posted 2023-05-07

技术标签:

【中文标题】CSS - 溢出：滚动； - 总是显示垂直滚动条？【英文标题】：CSS - Overflow: Scroll; - Always show vertical scroll bar? 【发布时间】：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 中的一个功能。我真的应该在购买之前阅读我要购买的东西......谢谢大家！ 【参考方案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 上的所有窗口和所有应用程序：