HTML/CSS - Changing scrollbar?

Question

I run a forum on which i'd like to change the scrollbar. I'd like it to look like this:

And I need to know where to put the HTML for this.

I think it goes in overall_header.html (http://prntscr.com/brvnvj) I'm assuming the CSS goes here? (http://prntscr.com/brvo2b)

I'm a complete noob, please help.

Welcome to Stack Overflow! It is expected that you at least attempt to code this for yourself. Stack Overflow is not a code writing service. I would suggest that you do some additional research, either via Google or by searching SO, make an attempt and. if you still have trouble, come back with **your code** and explain what you have tried and why it did not work. — Paulie_D, Jul 12 '16 at 10:01

score 1 · Answer 1 · answered Jul 12 '16 at 10:03

You cannot style the existing browser UI elements using CSS. (Thankfully! Did you remember those rainbow colored scrollbars and the end of the 90ies?)

But you may use some JS-plugin to create your own scrollbars. But make sure the user can still use “normal” scrolling. This means, not only must the scrollbar be draggable, but the content should also scroll when using the mousewheel, the up- and down-arrows or the page-up- or page-down-keys. Space bar should jump to the end of the page and so on. In fact you have to provide everything the browser has already implemented.

There are a lot of existing JS-plugins for such a task on the web already.

Well you CAN style scrollbars...just not crossbrowser - http://stackoverflow.com/questions/9251354/css-customized-scroll-bar-in-div — Paulie_D, Jul 12 '16 at 10:53

score 0 · Answer 2 · answered Jul 12 '16 at 11:04

This should help you achieve what you want:

//the color of the scrollbar
body::-webkit-scrollbar {
  background-color: darkgrey;
}


//the color of the thumb of the scrollbar
body::-webkit-scrollbar-thumb {
  background-color: blue;
}

Note that this css trick is not cross browser compatible. Also about the question where to add the code. You can either put it in an external file and load it in the header or just add the code somewhere in your body tag via code...

I combined both of your replies and they worked, thanks :D – MichaelMav Jul 22 '16 at 09:53 — MichaelMav, Jul 22 '16 at 09:53

score 0 · Accepted Answer · answered Jul 12 '16 at 11:23

Add this Style in Head Section:

You can change Colour in rgba(0,0,0,0.3) by changeing Value.

<style type="text/css">
     ::-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); 
}
   </style>

HTML/CSS - Changing scrollbar?

3 Answers3