滚动条 CSS 按钮未在 macOS 上显示？

Question

谁能看看我的代码并告诉我为什么我的按钮没有显示在 macOS 的滚动条中？他们在 Windows 上工作，也许我忽略了拼写错误或其他什么？

::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background:#eee;
  border: thin solid lightgray;
  box-shadow: 0px 0px 3px #dfdfdf inset;
  border-radius:10px;
}
::-webkit-scrollbar-thumb:horizontal {
  background:#4B6A89;
  border: thin solid #4B6A89;
  border-radius:10px;
  height: 8px;
}
::-webkit-scrollbar-thumb:vertical {
  background:#A1A7AC;
  border: thin solid #dfdfdf;
  border-radius:10px;
}
::-webkit-scrollbar-thumb:hover {
  background:#4B6A89;
}
::-webkit-scrollbar-button:horizontal:increment {
  background-image: url(http://i.imgur.com/rwmYdPk.png);
}
::-webkit-scrollbar-button:horizontal:decrement {
  background-image: url(http://i.imgur.com/VAvOauT.png);
}

Answer 1

在 macOS 上，滚动条实际上​​是默认隐藏的。要使它们可见，您需要使它们display: block;：

::-webkit-scrollbar-button:horizontal:increment {
    display: block;
    background-image: url(http://i.imgur.com/rwmYdPk.png);
}
::-webkit-scrollbar-button:horizontal:decrement {
    display: block;
    background-image: url(http://i.imgur.com/VAvOauT.png);
}

这是一个工作示例，针对一个选择器中的:start和:end按钮删除重复的按钮。

::-webkit-scrollbar-button:horizontal:increment {
    display: block;
    background-image: url(http://i.imgur.com/rwmYdPk.png);
}
::-webkit-scrollbar-button:horizontal:decrement {
    display: block;
    background-image: url(http://i.imgur.com/VAvOauT.png);
}

::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background:#eee;
  border: thin solid lightgray;
  box-shadow: 0px 0px 3px #dfdfdf inset;
  border-radius:10px;
}
::-webkit-scrollbar-thumb:horizontal {
  background:#4B6A89;
  border: thin solid #4B6A89;
  border-radius:10px;
  height: 8px;
}
::-webkit-scrollbar-thumb:vertical {
  background:#A1A7AC;
  border: thin solid #dfdfdf;
  border-radius:10px;
}
::-webkit-scrollbar-thumb:hover {
  background:#4B6A89;
}
::-webkit-scrollbar-button:horizontal:end:increment {
  background-image: url(http://i.imgur.com/rwmYdPk.png);
}
::-webkit-scrollbar-button:horizontal:start:decrement {
  background-image: url(http://i.imgur.com/VAvOauT.png);
}
::-webkit-scrollbar-button:horizontal:end:increment,
::-webkit-scrollbar-button:horizontal:start:decrement {
  display: block;
}

# Working Example (requires supported browser):