我有一个可滚动的div.在OS X中,滚动条会自动隐藏自己,这比总是可见的滚动条更漂亮,但有时会让我的用户感到困惑.对此问题的一般回应是使用::-webkit-scrollbar:
如何防止WebKit/Blink中的OS X触控板用户隐藏滚动条？
http://blog.0100.tv/2012/11/webkit-scrollbars-on-os-x/
这些解决方案的问题在于它们也会影响Windows上的Chrome用户,并且我希望让Windows上的Chrome用户具有与他们习惯相同的滚动体验.
有没有办法阻止滚动条隐藏在OS X而不改变任何滚动条样式,或者添加一些东西到我的CSS,这只会影响Mac用户？
谢谢!
我认为最好的用户体验是在 Windows 和 Mac 中保持相同的外观。您可以使用插件来使其在两个系统中变得更小，例如 NanoScroller：
您的 HTML：
<head>
<link rel="stylesheet" href="nanoscroller.css">
</head>
<body>
<!-- Your Element -->
<div id="about" class="nano">
<div class="nano-content">
<!-- Your content -->
</div>
</div>
<script src="jquery.js"></script>
<script src="nanoscroller.js"></script>
<script src="all.js"></script>
</body>
你的 JS (all.js)
$(function(){
// binding nanoScroller.
$('.nano').nanoScroller({ alwaysVisible: true });
})
请在此处查看完整文档： https: //jamesflorentino.github.io/nanoScrollerJS/