Webkit scrollbar dynamic styling

Question

I'm currently styling the scrollbar using Webkit's ::-webkit-scrollbar CSS properties and would like to change these properties on a mousemove event. The problem is that I can't seem to find a way to get to the scrollbar's CSS dynamically.

Is it possible to style the webkit scrollbar dynamically, through javascript (possibly using jQuery)?

May be this can help.. Insert style dynamically into the body on your mouse move event http://stackoverflow.com/questions/1212500/jquery-create-css-rule-class-runtime — Amitd, Jul 14 '12 at 11:19
For more current readers - make sure if you are removing the scrollbar using ::-webkit-scrollbar, this works for Chromium browsers but make sure you also apply `scrollbar-width: 0` to either the body or HTML tags (I found I had to do it on the HTML tag). This is easily done using JS to add inline styling with the .style attribute for the body or HTML element. — Lushawn, Mar 01 '22 at 13:38

score 11 · Answer 1 · answered Mar 24 '13 at 20:02

11

There is a nice workaround for this problem, you can add multiple css classes with diffident styles for the scrollbar, and then change the classes dynamically with Javascript.

Example:

.red::-webkit-scrollbar  { ... }
.blue::-webkit-scrollbar { ... }

A button that toggles between the classes red and blue:

$("#changecss").on("click", function(){
    $(".red,.blue").toggleClass("red").toggleClass("blue");
});

Here is a working fiddle: http://jsfiddle.net/promatik/wZwJz/18/

answered Mar 24 '13 at 20:02

António Almeida

9,620
8
59
66

1

I had an issue with force-redraw, and I found it in your fiddle. If anyone will look for it, the hack is to update value of `overflow` and get the height of the body. `document.body.style.overflow = 'hidden';` `document.body.offsetHeight;` `document.body.style.overflow = 'auto';` – Aleksey Pastuhov Nov 10 '18 at 10:48

score 3 · Answer 2 · edited May 23 '17 at 12:15

3

Yes, you can do it.

You need to include dynamically css style rule into stylesheet. And then to change it.

You can do it by this plugin

If you don't need to use jQuery - you can do it by pure Javascript: link 1 link 2. But there is cross-browser problems.

Also see Setting CSS pseudo-class rules from JavaScript

edited May 23 '17 at 12:15

Community

1
1

answered Jul 14 '12 at 11:07

Rustam

1,875
2
16
33

1

thanks, I don't like it and I won't use it, but this is indeed the only solution at the moment. – Sebas Jul 14 '12 at 13:45

score 3 · Answer 3 · edited May 23 '17 at 11:58

If you want to change a scrollbar properties when mouse is over it. You can do it with CSS, here an example http://jsfiddle.net/olgis/7Lg2R/ (sorry for ugly colorset).

If you want to change scrollbar colour if the mouse is over a container then look at this post Style webkit scrollbar on certain state . There are described several ways of doing it, with and without JavaScript.

REMARK: I do not know for which reason none of those example (with CSS neither JavaScript) do NOT work in my Firefox 11 for Mint, but all of them works perfectly in Chrome 18.0.1025.151.

score 2 · Answer 4 · answered Mar 06 '18 at 13:16

2

i created page with four tabs each different color set as well as scroll bar however this only worked by giving class to body tag

body.greenbody::-webkit-scrollbar {
width: 10px;
}
body.greenbody::-webkit-scrollbar-track {
background-color:rgb(0,50,0);
}
body.greenbody::-webkit-scrollbar-thumb {
background-image:url("../assets/ScrollGreen.png"); 
}

/

body.bluebody::-webkit-scrollbar {
width: 10px;
}
body.bluebody::-webkit-scrollbar-track {
background-color:rgb(0,0,50);
}
body.bluebody::-webkit-scrollbar-thumb {
background-image:url("../assets/ScrollBlue.png"); 
}

html

<body id="body" class="greenbody" bgcolor="#202020">

javascript for each tab button(only scroll bar section shown here)

document.getElementById("body").className="greenody";
.........other function().... 
document.getElementById("body").className="bluebody";

ScreenShot1 GreenScrollBar Image ScreenShot2 BlueScrollBar Image

answered Mar 06 '18 at 13:16

SparkShredder

127
5

Is that all your HTML? You might want to look into reading some more of the HTML and CSS basics, as it looks like you're not familiar with basic CSS to apply fixed heights and scroll the content within other elements. Ultimately, there's a lot of unasked questions within this question. – SEoF Mar 06 '18 at 13:27
Well , I'm really very new to this.Just doing it as "time-pass". And I didn't had subject to work on... so i just worked out a document on myself.And made it almost compatible to mobile(tested on mine) and tabs(tested chrome dev tools). – SparkShredder Mar 07 '18 at 12:36
[Rajnoor Brar](https://drive.google.com/open?id=1mFVqZMyJbU1OrpB3oZDAi0vG8pNzDnjz) Well,This is the link to whole web(.zip) .Check it out. Ther's more than meets the eye. @SEoF – SparkShredder Mar 07 '18 at 14:55

score 1 · Answer 5 · answered Jul 14 '12 at 00:29

1

For this you should replace the scrollbar altogether.

It's just a matter of picking whichever one gives you the easiest API.

answered Jul 14 '12 at 00:29

Silviu-Marian

10,565
6
50
72

Thank you for your contribution! But unfortunately I'm personally not wanting to use jQuery. – Sebas Jul 14 '12 at 00:37
4

@Sebas the original question sais `"possibly using jQuery"` – Silviu-Marian Jul 14 '12 at 00:40

score 1 · Answer 6 · answered Aug 14 '12 at 18:38

You can style scrollbars with CSS3, these generally only work for internal scrollbars and not the actual browser main scrollbar. You can also add the MOZ attribute to the following.

        ::-webkit-scrollbar {
            width: 10px;
            height: 10px;
        }
        ::-webkit-scrollbar-button:start:decrement,
        ::-webkit-scrollbar-button:end:increment  {
            display: none;
        }

        ::-webkit-scrollbar-track-piece  {
            background-color: #3b3b3b;
            -webkit-border-radius: 6px;
        }

        ::-webkit-scrollbar-thumb:vertical {
            -webkit-border-radius: 6px;
            background: #666 url(scrollbar_thumb_bg.png) no-repeat center;
        }

Demo: http://geryit.com/lib/custom-css3-scrollbars
Download Source: http://geryit.com/lib/custom-css3-scrollbars/custom-css3-scrollbars.zip

score 1 · Answer 7 · answered Jul 26 '15 at 11:26

you can make a <style> tag with id="scrollbar_style" and then add css inside it dynamicly like this :

document.getElementById('scrollbar_style').innerHTML = '::-webkit-scrollbar{width:15px;}';

just remember that using innerHTML on an element WILL NOT JUST ADD your new code, it WILL ALSO DELETE whatever was inside that element.

problem solved.

Hello Hack · Answer 8 · 2020-03-27T02:59:46.427

1

you can define a function in JavaScript with your own css.

function overFlow(el) {
   el.style.cssText = "overflow: auto;";
}

using in html:

<style>
::-webkit-scrollbar{display = none;}
</style>

<div id="overFlow" onclick="overFlow(this);">Something</div>

More Info: https://css-tricks.com/almanac/properties/s/scrollbar/

edited Mar 27 '20 at 02:59

answered Mar 27 '20 at 02:40

Hello Hack

107
5

Webkit scrollbar dynamic styling

8 Answers8

Linked