在Lion（OS X 10.7）的Safari中设置滚动条颜色 [英] Setting the scrollbar color in Safari for Lion (OS X 10.7)

问题描述

Lion中的新滚动条似乎可以根据body元素的背景颜色在Safari中调整其颜色。有没有办法手动设置滚动条应该是黑暗还是光？我知道有webkit CSS选项来风格的滚动条，实际上早于新的狮子滚动条。我使用该方法的唯一问题是，该栏不再像真正的狮子那样，滚动停止后淡出。虽然我想这可以通过使用CSS动画和javascript来识别滚动的开始和结束，这将是很好的简单地使用真正的滚动条w / o所有的hackery。

The new scrollbars in Lion seem to adjust their color in Safari based on the background color of the body element. Is there a way to manually set whether the scrollbar should be dark or light? I know there are webkit CSS options to style the scrollbar which actually predated the new Lion scrollbars. My only issue with using that method is that the bar no longer functions like the real Lion one which fades out after scrolling has stopped. While I suppose that this could be accomplished using CSS animations and javascript for recognizing the start and end of scrolling it would be nice to simply use the real scrollbar w/o all of the "hackery".

推荐答案

Krinkle 的修复（或类似）可能是最好的，但对于那些好奇，有点可能风格的滚动条在狮子，虽然非常恼人。这里有一个基本的想法：

Krinkle's fix (or similar) is probably the best, but for those curious, it's somewhat possible to style the scrollbar in Lion, albeit extraordinarily annoying. Here's the basic idea:

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 /

This is my closest approximation to Lion's default dark scrollbar. Here's where I got this all from: http://css-tricks.com/9130-custom-scrollbars-in-webkit/

这篇关于在Lion（OS X 10.7）的Safari中设置滚动条颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！