所以目前我有:
#div {
position: relative;
height: 510px;
overflow-y: scroll;
}
然而,我不相信对一些用户来说,这将是显而易见的,有更多的内容。他们可以在不知道我的div实际上包含更多内容的情况下向下滚动页面。我使用了510px的高度,这样它就会切掉一些文本,所以在一些页面上看起来确实有更多的内容,但这并不适用于所有页面。
我使用的是Mac,在Chrome和Safari中,只有当鼠标在Div上并且你正在滚动时,垂直滚动条才会显示出来。有没有办法让它一直显示出来呢?
发布于 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
发布于 2017-04-24 09:47:57
请注意,在CSS中,如果您在iPad中的某个位置有-webkit-overflow-scrolling: touch;
,NoviceCoding的解决方案将不起作用。解决方案要么删除所有出现的-webkit-overflow-scrolling: touch;
,要么将-webkit-overflow-scrolling: auto;
与NoviceCoding的解决方案放在一起。
发布于 2021-07-01 07:26:46
对于2021年及以后几年来这里的任何人:
"Custom scrollbars are no longer supported in iOS 14."
根据developer.apple.com论坛上的一位官方“框架工程师”的说法。
https://stackoverflow.com/questions/7492062
复制相似问题