Setting the scrollbar color in Safari for Lion (OS

问题:

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".

回答1:

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

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/

回答2:

Huge thanks to @EdwardLoveall for his answer & corresponding link. This is my variation on his approach for a more iOS-style scrollbar (I'm using 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 */;
}

As he noted, you can't really hide the track, but you can but a background on it. Making the background transparent doesn't seem to work either because it sits outside of the HTML element so there is just white below. Also a lot of properties like margin, padding, opacity, etc. don't seem to work but you can add a thick border the same color as the background to give the thumb a little room to breathe.

回答3:

From testing on Safari/Chrome it seems it's watching the background color of the body element and the body element only. Not per se the area that is visually underneath the scrollbar.

So when your page has a dark body background-color, it'll show a brighter, contrasting, scrollbar automatically.

For example the following:

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

.. will trigger a white scrollbar (since the body background is black), however the surface the scrollbar is floating on (the right hand side of the html element) is white, so it's white on white (with a very subtle grey border).

See https://codepen.io/Krinkle/full/aPZNXp in Safari.

回答4:

The only way is to set the light/dark background to html/body so the scrollbar would be of the opposite color and after that add the the desired background to the wrapper.

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

The height: 100%; are for stretching the wrapper when there are a little content.