CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Crash54Fox
Crash54Fox

Reputation: 41

How Would I Make a Custom Scrollbar Apply Only to a Specific DIV Tag

Basically, I'm trying to setup a thinner scroll-bar for a Tumblr blog I need to do. How do I specify which div the scrollbar should effect, because I don't want the custom scrollbar (for the div) to replace the web-browser's default scrollbar (the scrollbar on the far right of your screen)?

Any suggestion? I saw the css for the new scrollbar, but it's all webkit, and without HTML, how do I single out which DIV I want it to affect?

Upvotes: 3

Views: 4694

Answers (1)

ab29007
ab29007

Reputation: 7766

You can style your scroll bar for any specific div as this example. I applied the custom scrollbar to the div with class="scroll"

However custom scrollbar css does not work in firefox. However you can use some custom jquery plugins for that (they may not be as good as the css ones but they do the trick) and here's question about that.

Here's a great article about what different properties and styles you can apply to your custom scrollbar.

Here's a fiddle

.scroll{
  background-color:green;
  width:100px;
  height:200px;
  overflow:scroll;
}
.scroll::-webkit-scrollbar-track{
  -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
  background-color: #F5F5F5;
}
.scroll::-webkit-scrollbar{
  width: 10px;
  background-color: #F5F5F5;
}
.scroll::-webkit-scrollbar-thumb{
  background-color: #000000;
  border: 2px solid #555555;
}
<div class="scroll">
   sdaf<br/>sdaf<br/>sdaf<br/>sdaf<br/>sdaf<br/>sdaf<br/>sdaf<br/>sdaf<br/>sdaf<br/>sdaf<br/>sdaf<br/>sdaf<br/>sdaf<br/>sdaf<br/>sdaf<br/>
</div>

Upvotes: 4

Related Questions