• Home
  • WORDPRESS
    • PLUGINS
    • PHP
    • Themes
    • DEVELOPMENT
      • Javascript
      • JQuery
      • Mootools
  • WEB DESIGN
    • DESIGN
    • CSS
    • HTML
  • TYPOGRAPHY
    • FONTS
  • RESOURCES
    • TUTORIALS
    • THEMES
    • SLIDERS
    • TECHNOLOGY
  • ARCHIVES
  • CONTACT
  • Advertise

Code Geekz

    • Most Popular

      All time

    • 30 Best Tools for Data Visualization

      37 Comments

    • Best PHP Frameworks for Developers

      33 Comments

    • Latest Stories

      What is new?

    • Building Product Teams That Scale: The Case for Remote .NET Developers

      May 21, 2025

    • Choosing a WooCommerce Theme? Here’s What Most Store Owners Get Wrong

      May 9, 2025

    • Comments

      Most Recent

    • B. Frances on:

      Best WordPress Wedding Themes

    • Ultimate Content Locker Pro on:

      Best WordPress Social Content Locker Plugins for 2017

  • Home
  • WORDPRESS
    • PLUGINS
    • PHP
    • Themes
    • DEVELOPMENT
      • Javascript
      • JQuery
      • Mootools
  • WEB DESIGN
    • DESIGN
    • CSS
    • HTML
  • TYPOGRAPHY
    • FONTS
  • RESOURCES
    • TUTORIALS
    • THEMES
    • SLIDERS
    • TECHNOLOGY
  • ARCHIVES
  • CONTACT
  • Advertise

Customize Your Scrollbars with CSS3 and jQuery

0
  • by Sam Norton
  • In CSS · DEVELOPMENT · JQuery · TUTORIALS
  • — 20 May, 2014

Scrollable elements of web-pages have become popular since the early development of the web. Using textarea and iframe tags this can be done easily however with the new HTML5 and CSS3 capabilities it can now be done using the div tag.

Looking back in the day where IE 5.5, the Internet Explorer team introduced a set of non-standard CSS properties that allows users to customize scrollbars using the scrollbar-base-color from which you can use to make elements scroll.

That’s being said, it is now much easier to do it using HTML5 and CSS3. Webkit now supports styling of the scrollbars in overflow sections, drop-down, menus and text areas.

In today’s tutorial, I am going to show you how to customize your scrollbars using CSS3 and jQuery.

jquery scrollbar

View Demo

Resources required to complete this tutorial

  • Basic Knowledge of CSS3
  • Enscroll jQuery plugin
  • Time and Patience

CSS Version

The Markup

To start our demo for the CSS version of our customize scrollbar let’s put a basic markup and wrap them with a class scrollbar and an id of css_version. Let’s also wrap our content in a class content.


<div class="scrollbar" id="css_version">
<div class="content">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?"</div>
</div>

The CSS

Webkit has introduced these pseudo elements to customize the scrollbars.

::-webkit-scrollbar
::-webkit-scrollbar-button
::-webkit-scrollbar-track
::-webkit-scrollbar-track-piece
::-webkit-scrollbar-thumb
::-webkit-scrollbar-corner
::-webkit-resizer

To apply this on our CSS let’s use the following code. First we will style our scrollbar give it a width and height and then let’s use the following pseudo elements of webkit to customize the look of our scrollbar.

.scrollbar{
width:530px;
height:300px;
background-color:#fff;
margin:50px 0 0 40px;
overflow-y:scroll;
float:left;
padding: 10px;
border: 1px solid #c5c5c5;
}
.content{
height:450px;
}

#css_version::-webkit-scrollbar {
    width: 11px;
}

#css_version::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    -webkit-border-radius: 11px;
    border-radius: 11px;
}

#css_version::-webkit-scrollbar-thumb {
    -webkit-border-radius: 11px;
    border-radius: 11px;
    background: rgba(28,114,150,0.8);
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
}
#css_version::-webkit-scrollbar-thumb:window-inactive {
	background: rgba(255,0,0,0.4);
}

Note: These pseudo elements will work on browsers that support webkit such as Google Chrome, Safari and Opera.

jQuery Version

The problem in customizing scrollbars with HTML5 and CSS3 is that there is no standard way to accomplish this to all designs or browsers. That is why we need to use JavaScript as a solution. To customize the scrollbars using jQuery we will use the enscroll jQuery plugin by Jason Stoudt. Let’s see how we can apply this cool plugin.

The Markup

First we need to wrap out our content with the class scrollbox and then wrap out our content in a class content.


<div class="scrollbox">
<div class="content">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?"</div>
</div>

The CSS

Now for our CSS, let’s style our class scrollbox and use default class vertical-track and vertical-handle to style our scrollbar.

.scrollbox {
    width: 530px;
    height: 300px;
    background-color: #fff;
    overflow: auto;
    padding: 10px;
    border: 1px solid #c5c5c5;
}

.vertical-track {
    width: 11px;
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    -webkit-border-radius: 11px;
    border-radius: 11px;
}

.vertical-handle {
    width: 11px;
    -webkit-border-radius: 11px;
    border-radius: 11px;
    background: rgba(28,114,150,0.8);
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
}

Finally to make everything work, let’s now add our jQuery code for our Enscroll jQuery plugin. Add the following code before the closing body tag.

$(document).ready(function() {
    $('.scrollbox').enscroll();
});

Wrapping Up

There you have it! That’s how easy it is to customize your scrollbars using CSS3 and jQuery. There are also some other good jQuery plugins that you can use aside from enscroll jQuery plugin.

You might wanna check the following:

  • Nano Scroller
  • Perfect Scroller
  • Tiny Scrollbar

Hope you have gained something from this tutorial, your feedback and thoughts and input are welcomed- just use the comment box. Catch you all here again next time!

Share

Tags: customize scrollbar jquerycustomize scrollbar with css3Customize Scrollbars With CSS3 and jQueryhow to customize scrollbar

— Sam Norton

is a web, graphic and video enthusiast based in Angeles City, Philippines. Have a passion for designing detailed, creative and modern websites & graphics. He describes himself as a jolly, blessed and favored man.

  • Previous story 10 Best JavaScript Libraries for May 2014
  • Next story Best Node.js Tools, Tutorials and Resources

You may also like...

  • 11 Useful JavaScript Tools for Developers
  • 18 Best Bug and Issue Tracking Applications for Developers
  • 15 Excellent Sites to Learn Programming
  • jquery plugins for march Top jQuery Plugins for March 2014

Enter your em@il & get our posts delivered.





  • Enter your em@il & get our posts delivered.

  • Codegeekz
    • Home
    • CSS
    • Customize Your Scrollbars with CSS3 and jQuery
    • Home
    • WORDPRESS
      • PLUGINS
      • PHP
      • Themes
      • DEVELOPMENT
        • Javascript
        • JQuery
        • Mootools
    • WEB DESIGN
      • DESIGN
      • CSS
      • HTML
    • TYPOGRAPHY
      • FONTS
    • RESOURCES
      • TUTORIALS
      • THEMES
      • SLIDERS
      • TECHNOLOGY
    • ARCHIVES
    • CONTACT
    • Advertise

    CODEGEEKZ.COM