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

Answer 1

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

Answer 2

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.