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;
}
_______________________________________________
webkit-help mailing list
webkit-help@lists.webkit.org
https://lists.webkit.org/mailman/listinfo/webkit-help
