我有一个可滚动的 div。在 OS X 中，滚动条会自动隐藏，这比始终可见的滚动条要漂亮一些，但有时会让我的用户感到困惑。对这个问题的一般 react 是使用::-webkit-scrollbar:
How can I prevent scroll bars from being hidden for OS X trackpad users in WebKit/Blink?
CSS - Overflow: Scroll; - Always show vertical scroll bar?
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/
关于css - 如何在不影响 Windows 用户的情况下防止滚动条隐藏在 OS X 上？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38557671/