Using Custom Scrollbars On Your Site - Cyber Tweaks

Ads Top

Using Custom Scrollbars On Your Site

custom scrollbar on your website

Change your default scrollbar to make your site look pretty. make sure this custom scrollbar will only be shown in google chrome browser not in Mozilla firefox, opera and internet explorer.
you just need to make simple changes on your css.

Paste the following code before </head> .

<style>

::-webkit-scrollbar {

background: #1d1d1d;

height: auto;

width: 12px;

}

::-webkit-scrollbar-button {

background: #141414;

}

::-webkit-scrollbar-button:hover {

background: #151515;

}

::-webkit-scrollbar-track {

background: #1d1d1d;

}

::-webkit-scrollbar-track-piece {

background: #1d1d1d;

}

::-webkit-scrollbar-thumb {

background: #141414;

border: 0;

}

::-webkit-scrollbar-thumb:hover {

background: #151515;

}

::-webkit-scrollbar-corner {

background: #1d1d1d;

}

::-webkit-resizer {

background: #141414;

}

</style>

You can change colour as per your choice. for that use Colorpicker Tool

1 comment:

  1. Awesome! Worked beautifully. Tweaked the style to suit me(made it look like Google's new scrollbars), and here is what it ended up looking like: http://teenageminimalist.blogspot.com/

    Thanks!!

    ReplyDelete

Powered by Blogger.