Setting The Scrollbar Color in Safari for Lion (Os X 10.7)

Setting a lighter (white) scrollbar color in Lion

[myScrollView setScrollerKnobStyle:NSScrollerKnobStyleLight];

From the NSScrollView Class Reference.

Can I change the scrollbar color in Safari for iPhone?

No, although in your case it certainly could be useful from a ux perspective.

See the Apple CSS reference for more details.

Unsupported Properties Specific to Other Browsers

scrollbar-3dlight-color—Microsoft Internet Explorer property.

scrollbar-arrow-color—Microsoft Internet Explorer property.

scrollbar-darkshadow-color—Microsoft Internet Explorer property.

scrollbar-face-color—Microsoft Internet Explorer property.

scrollbar-highlight-color—Microsoft Internet Explorer property.

scrollbar-shadow-color—Microsoft Internet Explorer property.

scrollbar-track-color—Microsoft Internet Explorer property.

You may want to design some kind of gutter into the app so that the scrollbar is visible; otherwise you don't have a lot of options.

Lion scrollbar colors

I just had the same problem, but this seems to solve it. Although I haven't thoroughly tested it with other browsers yet. Here is how I fixed it.

html {
  background: #151515;
}
body {
  background: #FFF;
}

I set the background color I wanted to fill the rest of the page as the html background color, and set the body background color to white to trick Safari to render the dark grey scroll bar. Hope this helps!

Preventing scroll bars from being hidden for MacOS trackpad users in WebKit/Blink

The appearance of the scroll bars can be controlled with WebKit's -webkit-scrollbar pseudo-elements ^[blog]. You can disable the default appearance and behaviour by setting -webkit-appearance ^[docs] to none.

Because you're removing the default style, you'll also need to specify the style yourself or the scroll bar will never show up. The following CSS recreates the appearance of the hiding scroll bars:

Example (jsfiddle)

CSS

.frame::-webkit-scrollbar {
    -webkit-appearance: none;
}

.frame::-webkit-scrollbar:vertical {
    width: 11px;
}

.frame::-webkit-scrollbar:horizontal {
    height: 11px;
}

.frame::-webkit-scrollbar-thumb {
    border-radius: 8px;
    border: 2px solid white; /* should match background, can't be transparent */
    background-color: rgba(0, 0, 0, .5);
}

.frame::-webkit-scrollbar-track { 
    background-color: #fff; 
    border-radius: 8px; 
} 

WebKit (Chrome) Screenshot

Is there a browser event that fires when the OS X scroll bar style changes?

From everything I've read thus far, there is no DOM event fired during this style transition.

The most conclusive example is to create an overflow: auto div, and then log all of its events (in Safari or Chrome) via monitorEvents. Nothing is logged when changing the scroll bar style.

I have an open webkit bug on the issue (though it's probably minor enough that we won't see any movement on it).

Safari Won't Show BG on the body without a html background color set

After having the same issue occur on another client site, I was able to figure out what the issue is. I'm still not sure if this is a bug in Safari, but the problem is as follows:

When using the _'s (underscores) WordPress starter theme and Modernizr together, the default css in the theme is putting a clearfix on the html element itself (not on purpose). For some reason setting the pseudo elements (before and after) of the html element in Safari to display table causes the html element itself to overlay everything on the page (which is set to white by default). You can check out the ticket here https://github.com/Automattic/_s/issues/212 on the github page for the _'s theme.

Always Show Overflow ScrollBar

Well, there really isn't a way around this without creating your own scrollbar. So I opted to created a custom button navigation.

---

Related Topics