[webkit-help] Customizing the scroll bar background on a WKWebView

[John Brayton]

I am working on a Mac app that has a variety of color themes and makes
extensive use of WKWebView. When the system “Show scroll bars” setting
is set to “Always” the WKWebView shows a classic (non-overlay)
scrollbar with a white background. I am looking for a way to make that
scrollbar have the same background color as the web content.

Ideally I would like to make the webview use an overlay scrollbar that
is always visible, but I have not found a way to do that. Perhaps I am
missing something?

I wrote some CSS that approximates a standard macOS scrollbar but
would use my background color. It mostly works except that it only
highlights the scrollbar when the mouse is over the scrollbar thumb. A
standard macOS scrollbar is highlighted when the mouse is over any
part of the scrollbar. A selector of `::-webkit-scrollbar:hover
::-webkit-scrollbar-thumb` or `::-webkit-scrollbar-track
::-webkit-scrollbar-thumb` does not seem to work. Is there another way
I can get the thumb to have a different color when the mouse is over
any part of the scrollbar?

Is there another approach I am not considering?

Thank you.

John


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

::-webkit-scrollbar-track {
    box-shadow: inset 0 0 10px 10px #EACF94FF; /* my background color */
}

::-webkit-scrollbar-thumb {
    box-shadow: inset 0 0 10px 10px #00000080;
    border-left: solid 4px transparent;
    border-right: solid 3px transparent;
    border-top: solid 3px transparent;
    border-bottom: solid 3px transparent;
    border-radius: 15px;
}

/* This highlights the scroller when the mouse is over the knob, but
not above or below it. */
::-webkit-scrollbar-thumb:hover {
    box-shadow: inset 0 0 10px 10px #00000038;
}