Overflow-y：滚动显示Chrome中的滚动条

Question

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

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

我的问题是 - 滚动条没有出现在CHROME中，但确实出现在Firefox和Safari中。

任何解决方案？

更新：

此问题似乎与MAC OS隔离。

解决方案：

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

Answer 2

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

Answer 3

将此添加到您的css

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

或

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

Answer 4

我正在使用Crome版本48.0.2564.97 m

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

Answer 5

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