在 Safari for Lion (OS X 10.7) 中设置滚动条颜色答案

【问题标题】：Setting the scrollbar color in Safari for Lion (OS X 10.7)在 Safari for Lion (OS X 10.7) 中设置滚动条颜色
【发布时间】：2018-12-17 03:39:55
【问题描述】：

Lion 中的新滚动条似乎会根据 body 元素的背景颜色在 Safari 中调整它们的颜色。有没有办法手动设置滚动条是暗还是亮？我知道有 webkit CSS 选项来设置滚动条的样式，这实际上早于新的 Lion 滚动条。我使用该方法的唯一问题是该栏不再像真正的 Lion 那样在滚动停止后淡出。虽然我认为这可以使用 CSS 动画和 javascript 来识别滚动的开始和结束来完成，但简单地使用真正的滚动条而不使用所有“hackery”会很好。

【问题讨论】：

它们真的会变色吗？我认为它们只是半透明的，并显示了一些背景颜色......
是的，但根据主体的背景颜色，它们将是半透明的黑色或半透明的白色。

标签： css macos safari osx-lion

【解决方案1】：

Krinkle 的修复 (or similar) 可能是最好的，但对于那些好奇的人来说，在 Lion 中设置滚动条的样式是有可能的，尽管非常烦人。基本思路如下：

html {
  overflow: auto;
}

body {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0px;
  left: 0px;
  overflow-y: scroll;
  overflow-x: hidden;
}

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

::-webkit-scrollbar-track {
  visibility: hidden; /* doesn't seem to work */
}

::-webkit-scrollbar-thumb {
    border-radius: 4px;
    background: rgba(0,0,0,0.5);
}

::-webkit-scrollbar:window-inactive {
    visibility: hidden;
}

这是我最接近 Lion 的默认深色滚动条的近似值。我从这里得到这一切：http://css-tricks.com/9130-custom-scrollbars-in-webkit/

【讨论】：

【解决方案2】：

从 Safari/Chrome 上的测试来看，它似乎只关注 body 元素的背景颜色和 body 元素。不是滚动条下方的视觉区域。

因此，当您的页面具有深色主体背景色时，它会自动显示更亮、对比鲜明的滚动条。

例如：

html {
    background: white;
}
body {
    width: 50%;
    background: black;
}

.. 将触发一个白色滚动条（因为 body 背景是黑色的），但是滚动条浮动的表面（html 元素的右侧）是白色的，所以它是白底白字（非常微妙灰色边框）。

在 Safari 中查看 https://codepen.io/Krinkle/full/aPZNXp。

【讨论】：

【解决方案3】：

非常感谢@EdwardLoveall 的回答和相应的链接。这是我对他的更多 iOS 风格滚动条方法的变体（我使用的是 Lion + Chrome 19）。

::-webkit-scrollbar {
    background-color: black;
    width: 1.25em /* 20px / 16px */;
}

::-webkit-scrollbar-thumb {
    background-color: rgba(255,255,255,0.33333);
    border: 0.25em /* 4px / 16px */ solid black;
    border-radius: 1.25em /* 20px / 16px */;
}

正如他所说，你不能真正隐藏轨道，但你可以隐藏它的背景。使背景透明似乎也不起作用，因为它位于 HTML 元素之外，所以下面只有白色。还有很多属性，如边距、填充、不透明度等似乎不起作用，但您可以添加与背景颜色相同的粗边框，让拇指有一点喘息的空间。

【讨论】：

【解决方案4】：

唯一的方法是将亮/暗背景设置为html/body，这样滚动条的颜色就会相反，然后将所需的背景添加到包装器中。

html,body {
    height: 100%;
    background: #000;
}
.wrap {
    height: 100%;
    background: #FFF;
}

height: 100%; 用于在内容较少时拉伸包装器。

【讨论】：