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/

@quemeful I'm having this same issue... did you ever find a solution? — JackKalish
– JackKalish, Commented Feb 9, 2017 at 22:08

Andrei Zhamoida · Accepted Answer · 2015-07-01 12:13:52Z

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

edited Jul 1, 2015 at 12:13

Andrei Zhamoida

1,4632 gold badges21 silver badges32 bronze badges

answered Jul 1, 2015 at 11:34

anilviradiya

1397 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

quemeful Over a year ago

That code works to change the color. But the main problem is, it requires me to change the -webkit-overflow-scrolling to "scroll" instead of "touch" so I lose the Safari-like scroll acceleration.

anilviradiya Over a year ago

Please use of !important of every where then i think your problem wil be solve.

John James · Accepted Answer · 2017-09-20 23:03:23Z

1

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

edited Sep 20, 2017 at 23:03

John James

6673 gold badges9 silver badges20 bronze badges

answered Jul 1, 2015 at 12:28

Alias Varghese

2,1804 gold badges28 silver badges54 bronze badges

4 Comments

quemeful Over a year ago

try it on a touch screen device...it loses touch momentum scrolling: jsfiddle.net/rmcadbmq/10

Alias Varghese Over a year ago

What is your actual problem?. I think it solved the color issue

quemeful Over a year ago

the problem is when I can't change the color when the -webkit-overflow-scrolling is set to "touch" ... I switch it to "scroll" for jsfiddle...10 above

quemeful Over a year ago

doesn't have momentum scrolling on touch screen devices ... I think this is a big oversight in webkit css

Collectives™ on Stack Overflow

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

2 Answers 2

2 Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related