load nicescroll before html loads default browser scrollbar

Question

I'm using a very useful scrollbar plugin, called nicescroll.

This plugin takes some time to load, since I'm already using a lot of jquery in my project.

Is it possible someway to hide the default scroll bar of the browser until the script loads, and then the script would do its job and the new scrollbar would appear?

I'm using this code to initialize the plugin:

$(document).ready(function() {
    var nice = $('html').niceScroll({
        cursorborder: "",
        cursorcolor: "#333333",
        cursorwidth: "12px"
    });
});

Answer 1

You could do something like this:

// Hide Overflow of Body on DOM Ready //
$(document).ready(function(){
    $("body").css("overflow", "hidden");
});

// Show Overflow of Body when Everything has Loaded //
$(window).load(function(){
    $("body").css("overflow", "auto");        
    var nice=$('html').niceScroll({cursorborder:"",cursorcolor:"#333333",cursorwidth:"12px"});
});

Demo Here

I hope this helps!

Answer 2

Maybe it's a better option to add directly on your CSS.

body {
    overflow: hidden;
}

And then in jQuery:

$( function() {
    // activate niceScroll
});