CSS -溢出:滚动;-总是显示垂直滚动条?

所以目前我有:

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

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

我使用的是Mac电脑，在Chrome和Safari中，只有当鼠标在Div上并且你主动滚动时，垂直滚动条才会显示出来。有办法让它一直显示吗?

335268 次浏览
小开
最佳答案

我自己也遇到了这个问题。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>

根据需要定制外观。源

小开

这将适用于iPad、Safari和iOS 7.1。x从我的测试，我不确定iOS 6。但是，它不能在Firefox上运行。有一个jQuery插件，旨在跨浏览器兼容，称为jScrollPane。

此外，还有一个重复的帖子在这里堆栈溢出，它有一些其他的细节。

小开

请注意，在iPad Safari, NoviceCoding的解决方案将不工作，如果你有-webkit-overflow-scrolling: touch;在你的CSS某处。 解决方案是删除所有出现的-webkit-overflow-scrolling: touch;或将-webkit-overflow-scrolling: auto;与 < / p > NoviceCoding的解决方案。

小开

对于2021年及以后来到美国的人:

" iOS 14不再支持自定义滚动条

根据一位官方的“框架工程师”;在developer.apple.com论坛上。


提交答案