change HTML scrollbar color when using -webkit-overflow-scrolling: touch

Question

I have a iOS app that has a WebKit webview (WKWebView) and I want to change the color of the scrollbar in my HTML with CSS while still retaining the touch / throw acceleration scrolling.

I have tried using:

::-webkit-scrollbar-thumb {
    background-color: #ff4872;
}

...but to no avail. Because it doesn't change the color unless I set the webkit scrolling setting to scroll:

-webkit-overflow-scrolling: scroll;

...which takes away the Safari-like acceleration scrolling. I would like a pure CSS solution if possible, but I can do JavaScript or JQuery if that is the only option.

JSFiddle: https://jsfiddle.net/rmcadbmq/3/

Answer 1

Using Below code you will solve your issue

::-webkit-scrollbar {
    width: 12px;
}
::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);     
    border-radius: 10px;
}
::-webkit-scrollbar-thumb {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
}

Answer 2

I think it will work for you:

.scrollContainer::-webkit-scrollbar-thumb {
    background: #ff4872; 
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(112,0222,0,0.5);

}
.scrollContainer {
    font-size: 2em;
    width: 300px;
    height: 440px;
    background-color: #eee;
    overflow: scroll;
}

.scrollTest {
    width: 270px;
    height: 440px; 
}