所以目前我有:
#div {
position: relative;
height: 510px;
overflow-y: scroll;
}
然而，我不相信某些用户会明显地发现，那里有更多的内容。他们可以向下滚动页面，而不知道我的div实际上包含更多的内容。我使用的高度为510px，这样它就会截断一些文本，因此在某些页面上，它看起来确实有更多的内容，但这并不适用于所有页面。
我使用的是Mac电脑，在Chrome和Safari中，只有当鼠标在Div上并且你主动滚动时，垂直滚动条才会显示出来。有办法让它一直显示吗?
当前回答
我自己也遇到了这个问题。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>
根据需要定制外观。源
其他回答
对于2021年及以后来到美国的人:
“iOS 14不再支持自定义滚动条。”
developer.apple.com论坛上的一位官方“框架工程师”如是说。
请注意，在iPad Safari上，NoviceCoding的解决方案将无法工作，如果你有-webkit-overflow-scrolling: touch;在CSS的某个地方。 解决方案是删除所有出现的-webkit-overflow-scrolling: touch;或者放入-webkit-overflow-scrolling: auto;与 NoviceCoding的解决方案。
这将适用于iPad、Safari和iOS 7.1。x从我的测试，我不确定iOS 6。但是，它不能在Firefox上运行。有一个jQuery插件，旨在跨浏览器兼容，称为jScrollPane。
此外，在Stack Overflow上有一个重复的帖子，其中有一些其他细节。
我自己也遇到了这个问题。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>
根据需要定制外观。源
