CSS customized scroll bar in div

Question

How can I customize a scroll bar via CSS (Cascading Style Sheets) for one div and not the whole page?

Answer 1

Webkit scrollbar doesnt support on most of the browers.

Supports on CHROME

Here is a demo for webkit scrollbar Webkit Scrollbar DEMO

If you are looking for more examples Check this More Examples

---

Another Method is Jquery Scroll Bar Plugin

It supports on all browsers and easy to apply

Download the plugin from Download Here

How to use and for more options CHECK THIS

DEMO

Answer 2

I tried a lot of JS and CSS scroll's and I found this was very easy to use and tested on IE and Safari and FF and worked fine

AS @thebluefox suggests

Here is how it works

Add the below script to the

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script>
<script type="text/javascript" src="jquery.ui.touch-punch.min.js"></script>

<script type="text/javascript" src="facescroll.js"></script>

<script type="text/javascript">
    jQuery(function(){ // on page DOM load
        $('#demo1').alternateScroll();
        $('#demo2').alternateScroll({ 'vertical-bar-class': 'styled-v-bar', 'hide-bars': false });  
    })
</script>

And this here in the paragraph where you need to scroll

<div id="demo1" style="width:300px; height:250px; padding:8px; resize:both; overflow:scroll">
**Your Paragraph Comes Here**
</div>

For more details visit the plugin page

FaceScroll Custom scrollbar

hope it help's

Answer 3

Use Only CSS work in Firefox +64

.mycoldiv{
    scrollbar-color: white rebeccapurple;
    scrollbar-width: thin;
    display: block;
    height:400px;
    overflow-x: auto;
}

More info: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Scrollbars

Answer 4

I tried a lot of plugins, most of them don't support all browsers, I prefer iScroll and nanoScroller works for all these browsers :

• IE11 -> IE6
• IE10 - WP8
• IE9 - WP7
• IE Xbox One
• IE Xbox 360
• Google Chrome
• FireFox
• Opera
• Safari

But iScroll do not work with touch!

demo iScroll : http://lab.cubiq.org/iscroll/examples/simple/
demo nanoScroller : http://jamesflorentino.github.io/nanoScrollerJS/

Answer 5

.className::-webkit-scrollbar {
  width: 10px;
  background-color: rgba(0,0,0,0);
}

.className::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.5);
  border-radius: 5px;
}

gave me a nice mobile/osx like one.

Answer 6

There is a way by which you can apply custom scrollbars to custom div elements in your HTML documents. Here is a an example which helps. https://codepen.io/adeelibr/pen/dKqZNb But as a gist of it. You can do something like this.

<div class="scrollbar" id="style-1">
  <div class="force-overflow"></div>
</div>

CSS file looks like this.

.scrollbar
{
  margin-left: 30px;
  float: left;
  height: 300px;
  width: 65px;
  background: #F5F5F5;
  overflow-y: scroll;
  margin-bottom: 25px;
}

.force-overflow
{
  min-height: 450px;
}

#style-1::-webkit-scrollbar-track
{
  -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
  border-radius: 10px;
  background-color: #F5F5F5;
}

#style-1::-webkit-scrollbar
{
  width: 12px;
  background-color: #F5F5F5;
}

#style-1::-webkit-scrollbar-thumb
{
  border-radius: 10px;
  -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
  background-color: #555;
}