Mac无法可靠地显示水平滚动条。

Question

我不知道为什么Mac会拒绝在溢出的元素上可靠地显示水平滚动条。我不是经常使用Mac的用户，所以这可能只是让我变得愚蠢。

https://codepen.io/phawxby/pen/JrayeG

ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
  display: block;
  max-width: 500px;
  overflow-x: scroll;
  white-space: nowrap;

  li {
    display: inline-block;
    width: 150px;
    height: 150px;
    background-color: red;
  }
}

奇怪的是，他们不会通过browserstack显示，但会在我旁边的物理Mac上显示。不幸的是，我们收到的一些用户的报告也是如此，显然他们是物理机器。

我们非常感谢任何建议。

High Sierra - Safari 11 Browserstack

High Sierra - Chrome 61 Browserstack

High Sierra - Safari 11 Physical

High Sierra - Chrome 61 Physical

Answer 1

Mac OSX的系统设置可以打开和关闭，不断显示滚动条。它可以在系统设置中找到 - ＆gt;一般 - ＆gt; “显示滚动条”。

如果“显示滚动条”已关闭，它们只会在您实际滚动时显示在浏览器窗口中。这样你就不会在溢出的容器中看到它们，除非你滚动。

Answer 2

请查看此链接，了解自定义滚动条的一些示例 - https://codepen.io/devstreak/pen/dMYgeO

ul::-webkit-scrollbar-track
{
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    border-radius: 10px;
    background-color: #F5F5F5;
}

如果您设置display：inline并只是创建自己的滚动条样式，它应该保持可见。