I found a lot of material on the color design. But not a single site, where it was told about setting the width of the scroll bar, indents from it to the text. Who did, share the experience.

    3 answers 3

    Here is an example . It is necessary? The scroll bar cannot be changed here. This is the standard control of the operating system. You can blind something of your javascript. An example here , see the block on the right with a list of videos. Used if you need 100% stylization of all elements of the site. The distance from the band to the text is governed by the padding property, however, as well as to the other borders: up, down, left.

    Added. The example uses flash. There are jQuery scrollbar plugins, as many as 10 pieces .

    • Interestingly, there are some ready-made examples about "dazzling with javascript" ... and then, where you showed it, it seems that flash was used. - Nuboyd
    • The answer is updated. - komka

    js has a good example of flexscroll

    • Better than others? - komka

    So you can change the standard scrollbar

    <style> -webkit-scrollbar{height:10px}::-webkit-scrollbar{width:10px}::-webkit-scrollbar-track-piece:vertical{background-color:#3c3c3c}::-webkit-scrollbar-track-piece:horizontal{background-color:#3c3c3c}::-webkit-scrollbar-thumb:vertical{background-color:#787878;border:1px #8f8f8f solid;border-radius:3px;-webkit-border-radius:3px}::-webkit-scrollbar-thumb:vertical:hover{background-color:#969696}::-webkit-scrollbar-thumb:vertical:active{background-color:#5b5b5b}::-webkit-scrollbar-thumb:horizontal{background-color:#787878;border:1px #8f8f8f solid;border-radius:3px;-webkit-border-radius:3px}::-webkit-scrollbar-thumb:horizontal:hover{background-color:#969696}::-webkit-scrollbar-thumb:horizontal:active{background-color:#5b5b5b}::-webkit-scrollbar-button:horizontal{background-color:#5e5e5e;background-repat:no-repeat;width:10px;height:10px}::-webkit-scrollbar-button:horizontal:hover{background-color:#747474;background-repat:no-repeat;width:10px;height:10px}::-webkit-scrollbar-button:horizontal:active{background-color:#6b6b6b;background-repat:no-repeat;width:10px;height:10px}::-webkit-scrollbar-button:vertical{background-color:#5e5e5e;background-repat:no-repeat;width:10px;height:10px}::-webkit-scrollbar-button:vertical:hover{background-color:#747474;background-repat:no-repeat;width:10px;height:10px}::-webkit-scrollbar-button:vertical:active{background-color:#6b6b6b;background-repat:no-repeat;width:10px;height:10px}::-webkit-resizer{background-color:#5e5e5e;background-repeat:no-repeat;width:5px;height:5px}::-webkit-resizer:hover{background-color:#747474;background-repeat:no-repeat;width:5px;height:5px}::-webkit-resizer:active{background-color:#6b6b6b;background-repeat:no-repeat;width:5px;height:5px} </style>

    Demo -> Link

    • Only this is not a cross-browser solution and will only work on a webkit engine. - Darina Goodwill