NiceScroll - Leaving Original Scrollbar Intact

问题

I've added the NiceScroll jQuery plugin to my page and it does exactly what I'd want it to do (eases scrolling from mouse wheel events).

However, the plugin seems geared around styling the scrollbar aswell. Is it possible to preserve the original styling of the browser's scrollbar during use of this plugin?

I've checked the documentation and tried many parameters but can't seem to find the relevant one.

In it's current state, the scrollbar is not visible.

回答1:

I dont know if this still is relevant, but anyways i had the same problem, and found a solution:

Simply remove this part from the plugin, in version 3.4.0 it is at line: 706-711.

 if (!cap.isie9mobile) self.css(cont,{'overflow-y':'hidden'});      

 if (self.ispage&&cap.isie7) {
    if (self.doc[0].nodeName=='BODY') self.css($("html"),{'overflow-y':'hidden'});  //IE7 double scrollbar issue
    else if (self.doc[0].nodeName=='HTML') self.css($("body"),{'overflow-y':'hidden'});  //IE7 double scrollbar issue
 }

If you dont like editing the plugin, you have to remove the "overflow:hidden;" from the body inline style, this is what the plugin does.

When you have either removed the lines from the plugin, or in another way removed the "overflow:hidden;" from the body element. You have to hide the railbar from the plugin.

This is what i did:

$(document).ready(function(){
    $("html").niceScroll();
    $('.nicescroll-rails').remove();
});

You can see a working example here

回答2:

I don't know about leaving the original in tact but incase you can't do that you could easily style your scrollbar something like:

::-webkit-scrollbar {
    width: 10px;
}

::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 4px rgba(0,0,0,0.5); 
    border-radius: 8px;
}

::-webkit-scrollbar-thumb {
    border-radius: 8px;
    -webkit-box-shadow: inset 0 0 4px rgba(0,0,0,0.8); 
}

IMHO it looks better with some nice simple styling like that anyway, no one like to see default scrollbars :P

来源：https://stackoverflow.com/questions/21090002/nicescroll-leaving-original-scrollbar-intact

标签

jquery

styles

scrollbar

nicescroll