Question

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

这些解决方案的问题在于它们也会影响Windows上的Chrome用户，并且我希望让Windows上的Chrome用户具有与之相同的滚动体验。

有没有办法阻止滚动条隐藏在OS X上而不更改任何滚动条样式，或者在我的CSS中添加一些内容以便这只影响Mac用户？

谢谢！

Answer 1

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

Answer 2

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

.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);
}

<div class="container">
<ul>
  <li>Sample Content</li>
  <li>Sample Content</li>
  <li>Sample Content</li>
  <li>Sample Content</li>
  <li>Sample Content</li>
  <li>Sample Content</li>
  <li>Sample Content</li>
  <li>Sample Content</li>
  <li>Sample Content</li>
  <li>Sample Content</li>
  <li>Sample Content</li>
  <li>Sample Content</li>
  <li>Sample Content</li>
  <li>Sample Content</li>
  <li>Sample Content</li>
  <li>Sample Content</li>
  <li>Sample Content</li>
  <li>Sample Content</li>
  <li>Sample Content</li>
  <li>Sample Content</li>
  <li>Sample Content</li>
  <li>Sample Content</li>
  <li>Sample Content</li>
  <li>Sample Content</li>
  <li>Sample Content</li>
  <li>Sample Content</li>
  <li>Sample Content</li>
  <li>Sample Content</li>
  <li>Sample Content</li>
  <li>Sample Content</li>
</ul>
</div>

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

2 个答案: