在Safari for Lion中设置滚动条颜色（OS X 10.7）

Question

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

Answer 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/

Answer 2

在Safari / Chrome上进行测试时，它似乎只是在观察身体元素和身体元素的背景颜色。本身不是滚动条下方的视觉区域。

因此，当您的页面背景颜色较深时，它会自动显示更明亮，对比更强的滚动条。

例如以下内容：

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

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

请参阅Safari中的https://codepen.io/Krinkle/full/aPZNXp。

Answer 3

非常感谢@EdwardLoveall的回答＆amp;相应的链接。这是我对更多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元素之外，因此下面只有白色。边缘，填充，不透明等许多属性似乎都不起作用，但你可以添加一个与背景相同颜色的粗边框，让拇指有一点呼吸空间。

Answer 4

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

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

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