CODEWITHSUNDEEP
htmlcss
MichaelMav
MichaelMav

Reputation: 90

HTML/CSS - Changing scrollbar?

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

enter image description here

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.

Upvotes: 1

Views: 740

Answers (3)

Harshad Hirapara
Harshad Hirapara

Reputation: 462

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>

Upvotes: 0

K Nugal
K Nugal

Reputation: 134

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...

Upvotes: 0

feeela
feeela

Reputation: 29932

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.

Upvotes: 1

Related Questions