2

How can I change the scroll bar style in css or change the different UI in chrome or any browser. I have seen many sites with different user interfaces.
Can this be done with css or html?

  • With CSS3 you can achieve this. You might find [this](http://www.codeproject.com/Tips/674478/Customize-Scrollbars-using-CSS) article helpful. – Jon Apr 27 '15 at 11:58

3 Answers3

6

Check here . You can also check this link.

Use css like this 

html {
  background: lightgrey;
  height: 100%;
  overflow: hidden;
}
body {
  height: 100%;
  background: whitesmoke;
  overflow: scroll;
  width: 80%;
  max-width: 600px;
  margin: 0 auto;
  padding: 3em;
  font: 100%/1.4 serif;
  border: 1px solid rgba(0,0,0,0.25)
}
p {
  margin: 0 0 1.5em;
}

body::-webkit-scrollbar {
    width: 0.2em;
}

body::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
}

body::-webkit-scrollbar-thumb {
  background-color: red;
  outline: 1px solid red;
}
greg
  • 4,843
  • 32
  • 47
Manoj Dhiman
  • 5,096
  • 6
  • 29
  • 68
1

You can try like this,

body {
    scrollbar-face-color: #000000;
    scrollbar-shadow-color: #2D2C4D;
    scrollbar-highlight-color:#7D7E94;
    scrollbar-3dlight-color: #7D7E94;
    scrollbar-darkshadow-color: #2D2C4D;
    scrollbar-track-color: #7D7E94;
    scrollbar-arrow-color: #C1C1D1; 
}

One more EXAMPLE with hover effect.

pcs
  • 1,864
  • 4
  • 25
  • 49
0

I've just learned with this topic that we can customize scrollbar in CSS3... But it doesn't seem very efficient in every browser.

What I advise is that you choose (if you can) a jQuery plugin instead. Like http://manos.malihu.gr/repository/custom-scrollbar/demo/examples/complete_examples.html . I often use it. It's very powerful, customizable and interoperable !

Angy
  • 30
  • 5