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

Question

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?

I know you can edit the scroll bar, but I'm saying, once you edit the scroll bar, it seems like that edit is applied to every scroll on the page. I just want my edit to apply to one specific div — Crash54Fox, Dec 30 '16 at 03:23

score 3 · Answer 1 · edited May 23 '17 at 12:01

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>

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

1 Answers1