How to create custom scrollbars in WebKit

| Last Updated: | In: Freebies, HTML / CSS

In my recent project, client ask to create custom scrollbars using webkit for all browsers like google chrome, Mozilla Firefox, Safari, IE and etc. Now days -webkit is back with nice styles. You can design your browser’s scrollbar by simply applying the peace of -webkit css code.

What is webkit?

WebKit is a layout engine software component for rendering web pages in web browsers. By using webkit you can design scrollbar of your browsers.


See Live Webkit Example

you can also customized scrollbars of your browsers using WebKit Scrollbar css. Below is the complete example. By using below css you can design scrollbars of your browsers. Copy and paste below css code in your style.css file.

After adding the above css snippets in your style.css file you will see the effect of added css code. Your browser’s scrollbars will be designed very nice. See the Output of above webkit css code.

Tags: , , , , , , ,

About: Prem Tiwari

Prem Tiwari is founder of and Software developer from New Delhi (India). Follow Prem's development codes on facebook, and make sure you check out for the latest in web development related Tips with the complete code.

You may also like:

Follow us!

Get Free Access of 350+ Scripts

Don't worry you'll not be spammed!

Featured eBook

WordPress Security Guide

Learn how to implement security guideline in your WordPress site...


Pincode Finder

pincode-finder tool

Online Pincode Finder

Best tool to locate post Office address and pincodes of all india...