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

12 浏览
0 Comments

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

我有一个可滚动的div。在OS X上，滚动条会自动隐藏，这比始终可见的滚动条更漂亮，但有时会使我的用户感到困惑。对此问题的一般响应是使用 ::-webkit-scrollbar ：

如何防止在WebKit / Blink中为OS X触摸板用户隐藏滚动条？

CSS - 溢出：滚动；- 总是显示垂直滚动条吗？

http://blog.0100.tv/2012/11/webkit-scrollbars-on-os-x/

这些解决方案的问题在于它们也会影响Windows上的Chrome用户，而我希望让Windows上的Chrome用户拥有他们习惯的相同滚动体验。

是否有一种方法可以防止OS X上的滚动条隐藏而不更改任何滚动条样式，或者在我的CSS中添加一些东西，以便这仅影响Mac用户？

谢谢！

admin 更改状态以发布 2023年5月23日
0

2 答案

0 Comments

你必须隐藏默认的滚动条并自己创建一个。请检查以下代码。这将始终显示滚动条。

.container {max-height: 200px; border: 1px solid #dadada; overflow: auto;}
/* Overwrite the default to keep the scrollbar always visible */
::-webkit-scrollbar {
    -webkit-appearance: none;
    width: 7px;
}
::-webkit-scrollbar-thumb {
    border-radius: 4px;
    background-color: rgba(0,0,0,.5);
    -webkit-box-shadow: 0 0 1px rgba(255,255,255,.5);
}


    
  
  • Sample Content
    • 
  
  • Sample Content
    • 
  
  • Sample Content
    • 
  
  • Sample Content
    • 
  
  • Sample Content
    • 
  
  • Sample Content
    • 
  
  • Sample Content
    • 
  
  • Sample Content
    • 
  
  • Sample Content
    • 
  
  • Sample Content
    • 
  
  • Sample Content
    • 
  
  • Sample Content
    • 
  
  • Sample Content
    • 
  
  • Sample Content
    • 
  
  • Sample Content
    • 
  
  • Sample Content
    • 
  
  • Sample Content
    • 
  
  • Sample Content
    • 
  
  • Sample Content
    • 
  
  • Sample Content
    • 
  
  • Sample Content
    • 
  
  • Sample Content
    • 
  
  • Sample Content
    • 
  
  • Sample Content
    • 
  
  • Sample Content
    • 
  
  • Sample Content
    • 
  
  • Sample Content
    • 
  
  • Sample Content
    • 
  
  • Sample Content
    • 
  
  • Sample Content
    •

0
0 Comments

我认为最佳的用户体验是在Windows和Mac中保持相同的外观。您可以使用插件在两个系统中使其更加美观，例如NanoScroller：

您的HTML：

您的JS（all.js）

$(function(){
    // binding nanoScroller.
    $('.nano').nanoScroller({ alwaysVisible: true });
})

查看完整文档：

https://jamesflorentino.github.io/nanoScrollerJS/

0