CSS - Overflow:滚动；-总是显示垂直滚动条？
CSS - Overflow:滚动；-总是显示垂直滚动条？
提问于 2011-09-21 05:33:34
所以目前我有：
#div {
position: relative;
height: 510px;
overflow-y: scroll;
}然而，我不相信对一些用户来说，这将是显而易见的，有更多的内容。他们可以在不知道我的div实际上包含更多内容的情况下向下滚动页面。我使用了510px的高度，这样它就会切掉一些文本，所以在一些页面上看起来确实有更多的内容，但这并不适用于所有页面。
我使用的是Mac，在Chrome和Safari中，只有当鼠标在Div上并且你正在滚动时，垂直滚动条才会显示出来。有没有办法让它一直显示出来呢？
回答 5
Stack Overflow用户
回答已采纳
发布于 2012-04-11 13:19:11
我自己也遇到了这个问题。div Lion在不使用时隐藏滚动条，使其看起来更“圆滑”，但同时您解决的问题也出现了:人们有时看不到OSx是否具有滚动功能。
解决方法:在你的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
Stack Overflow用户
发布于 2017-04-24 09:47:57
请注意，在CSS中，如果您在iPad中的某个位置有-webkit-overflow-scrolling: touch;，NoviceCoding的解决方案将不起作用。解决方案要么删除所有出现的-webkit-overflow-scrolling: touch;，要么将-webkit-overflow-scrolling: auto;与NoviceCoding的解决方案放在一起。
Stack Overflow用户
发布于 2021-07-01 07:26:46
对于2021年及以后几年来这里的任何人：
"Custom scrollbars are no longer supported in iOS 14."
根据developer.apple.com论坛上的一位官方“框架工程师”的说法。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/7492062
复制相关文章
相似问题