Custom ScrollBar In Your Website

Custom Scroll Bar is getting more and more popular. It adds a bit uniqueness to your website, makes it feel and look different. There are basically few ways to implement a custom scroll bar. I will share with you the easiest and advanced way. It is your choice. I prefer the lightweight (easy) way because speed is more important for me. I do not like to add more JavaScript to my website. However, if you are a designer, photographer or you just want your website to have a cool scrollbar, go ahead with the advanced jQuery plugin.

Easiest Way

Just copy/paste the code below in your style.css (your main css) and see the result. This is the most easiest and lightweight way to add a custom scrollbar. However, it will NOT affect Mozilla Firefox users.

Note: This does not work in Mozilla Firefox. It only works in WebKit browsers – Chrome, Opera and IE.

::-webkit-scrollbar {
width: 10px;
}
/* Track */
::-webkit-scrollbar-track {
-webkit-border-radius: 10px;
border-radius: 10px;
}

/* Handle */
::-webkit-scrollbar-thumb {
-webkit-border-radius: 10px;
border-radius: 10px;
background: #111;
}

This code will turn your scrollbar black rounded. It is the fifth scrollbar in the featured image above.

Malihu jQuery custom content scroller

This is the most safest and advanced method. It works on every modern browser including Mozilla Firefox. You just need to add your jQuery.js and the Malihu jQuery custom content scroller before closing the body tag, as well as the CSS in the head.
The scrollbar has tons of options and you can use it on certain pages or areas in your website. Features include vertical and/or horizontal scrollbar(s), adjustable scrolling momentum, mouse-wheel and more. I strongly recommend it to designers and photographers to use it on their website because it gives more professional look. Last but not least, it gets updated frequently.

There are also amazing themes included, so you do not need to waste your time to code or think about your scrollbar. To add a theme you just add this code in your jQuery.theme.js

$(".content").mCustomScrollbar({
    theme:"dark"
});

Link

What do you think? Do you know a better custom scrollbar? Share in the comments below.

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.