如何防止滚动条隐藏在OS X上而不影响Windows用户？

我有一个可滚动的div。在OS X中，滚动条会自动隐藏自己，这比总是可见的滚动条更漂亮，但有时会让用户感到困惑。对这一问题的普遍反应是使用::-webkit-scrollbar：如何防止滚动条隐藏在OS X上而不影响Windows用户？

这些解决方案的问题在于，他们也可以在Windows冲击Chrome用户，我想让Chrome用户保持与以往相同的滚动体验。

有没有办法阻止滚动条隐藏在OS X上而不改变任何滚动条样式，或者添加一些东西到我的CSS，这样只会影响Mac用户？

谢谢！

来源

2016-07-24 JSP64

由于您似乎想让Chrome用户拥有滚动体验，因此我还建议您将其放在OS X上。此处的用户也更喜欢scrollin克服他们习惯的经验，所以如果你把事情保持原样，你会为他们提供服务。惊讶的用户是用户体验决定的一个标志。也就是说，如果您仍然愿意继续并覆盖用户的首选用户界面，请使用JavaScript进行用户代理嗅探 - 寻找“Mac”或“Chrome”或用户代理字符串中的任何内容 - 并相应地应用CSS。如果您想了解更多信息，我可以提供详细的答案。 – amn

我认为韧体用户体验在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/

来源

2017-05-24 14:12:17

如何防止滚动条隐藏在OS X上而不影响Windows用户？

回答

相关问题