溢出-y：滚动未在 Chrome 中显示滚动条

Posted 2023-03-06

【中文标题】溢出-y：滚动未在 Chrome 中显示滚动条

【英文标题】：Overflow-y: Scroll not showing scrollbar in Chrome

【发布时间】：2016-05-14 02:19:54

【问题描述】：

我正在生成此页面左侧的组织列表：http://www.ihhub.org/member-map/

这个列表是通过附加链接到相应地图的<span>标签生成的。

我的问题是 - 滚动条不会出现在 CHROME 中，但会出现在 Firefox 和 Safari 中。

有什么解决办法吗？

更新：

此问题似乎与 MAC 操作系统无关。

解决方案：

::-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);

【问题讨论】：

您还有哪些overflow 规则？当您沿 overflow-y 设置 overflow-x 时，某些浏览器无法正常运行

它出现在您发布的链接上。在 chrome 48 win7 上测试

对我来说，它不适用于 Chrome、Safari、Firefox。

【参考方案1】：

根据CSS - Overflow: Scroll; - Always show vertical scroll bar?：OSx Lion 在不使用时会隐藏滚动条，使其看起来更“光滑”，但同时出现了您解决的问题：人们有时看不到 div 是否具有滚动功能或不是。

CSS 修复：

::-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);

【讨论】：

这几乎是一个很好的解决方案，问题是它为滚动条排水沟增加了空间，否则不会存在。我希望有一种方法可以在不占用额外空间的情况下展示它。

【参考方案2】：

我很好地看到了滚动条。如果您使用的是 Mac，您可能需要确保始终显示滚动条

【讨论】：

嗨 Timo - 不幸的是，当我更改 mac 设置时，滚动条没有出现在组织列表中。此外 - 我相信 - 这是 Chrome for Mac 和 Windows 上的一个问题。

Great Timo - 看起来只是 Mac 上没有自动出现。我仍在寻找这个解决方案。我已将 overflow-y:scroll 更改为 overflow:auto 并且没有任何变化。

【参考方案3】：

将此添加到您的 css 中

.list::-webkit-scrollbar 
    -webkit-appearance: scrollbartrack-vertical;
    

或

.list::-webkit-scrollbar 
   -webkit-appearance: scrollbarthumb-vertical;
 

【讨论】：

嗨 Timo - 非常感谢您指出这一点。不幸的是，这不是我想要的，但是由于您的 ::-webkit-scrollbar 选择器，我确实遇到了解决方案。

我在上面分享了@Timo，我也添加了网站链接。非常感谢您的意见。

谢谢。没问题:)

@Timo 它现在不工作并且作为无效的属性值来。

【参考方案4】：

我使用的是 Windows 8，Google Chrome 版本是 48.0.2564.97。并且它的工作完美。请参阅图像突出显示的区域。

【参考方案5】：

我使用的是 Crome 版本 48.0.2564.97 m

而且它工作得很好.. 将其更改为 overflow-y:auto 以防万一没有足够的项目它不会显示滚动。

【讨论】：

我很高兴看到它在 Chrome 上运行 - 这是在 Windows 上运行的。如果是这样，问题仍然存在于 Mac 上。根据几个 cmets，我已更改为溢出：自动。请指教。