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

奇怪的是，它们不是通过浏览器栈显示的，而是显示在我旁边的物理Mac上。不幸的是，我们得到了一些用户的报告，他们也得到了这个问题，显然他们是物理机器。

如有任何建议，将不胜感激。

高塞拉- Safari 11浏览器堆栈

​

高塞拉-铬61浏览器栈

​

高塞拉- Safari 11体能

​

高塞拉-铬61物理

​

Answer 1

Mac有一个系统设置来打开和关闭不断显示滚动条。它可以在系统设置-> General ->“显示滚动条”中找到。

如果“显示滚动条”被关闭，它们只会出现在浏览器窗口中，而您实际上正在滚动。那样的话，除非你在滚动，否则你不会看到它们在满溢的容器里。

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，并简单地创建了自己的滚动条样式，那么它应该保持可见。