Customize scrollbar in webview


#1

How do I customize the style of the scrollbar in the webview? I’ve tried -webkit-scrollbar and it didn’t work.


#2

You need to use it as a selector (::-webkit-scrollbar { … }), not as a property. Check out the article on CSS-Tricks: Custom Scrollbars in WebKit. Just tested it in the example app and it worked.


#3

Thanks for the reply.

That’s what I was doing, I tried it again and it still didn’t work. Found a solution though, just inserted the CSS whenever a webpage was loaded and bam it worked.


#4

take a look at this:

::-webkit-scrollbar {     
        background-color: #fff;
        width: .8em
}

::-webkit-scrollbar-thumb:window-inactive,
::-webkit-scrollbar-thumb {
        background:  black
}

it’s part of my electron app, Soube, and it works. (The colors are not part of the app, I added those as examples, because I was using variables)