How you can use css scrollbar in Google Chrome, Internet Explorer and Firefox

Hi guys! Now I'm working on a new project and I have created a customized scrollbar that works well in all browsers(Google Chrome, Internet Explorer , Firefox and other browsers).

First a have used this css code:

::-webkit-scrollbar {
width: 12px;
}
::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.1);
-webkit-border-radius: 10px;
border-radius: 10px;
}
::-webkit-scrollbar-thumb {
-webkit-border-radius: 10px;
border-radius: 10px;
background: rgba(224,224,224,0.8);
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.1);
}
::-webkit-scrollbar-thumb:window-inactive {
background: rgba(224,224,224,0.4);
}

to create a customized scrollbar for Google Chrome.

To display a customized scrollbar in other browsers, I he used this plugin: http://jscrollpane.kelvinluck.com/

Also I have edit this code:

$(function()
{
	$('.scroll-pane').jScrollPane();
});

to

jQuery(function()
{
var chrome = navigator.userAgent.toLowerCase().indexOf('chrome') > -1;
if(chrome == false)
{
jQuery('#right').jScrollPane();
}
});
This code will block jScrollPane in Google Chrome. In this way I have created a customized scrollbar!








Leave a Comment