JQuery nicescroll

Question

I am using the nicescroll plugin. http://areaaperta.com/nicescroll/

I have little doubt. When the page is loaded, I see my default scrollbar in the browser, and then the nicescroll panel is displayed. I want to apply the nicescroll panel to the whole document, and I have the following code

var nice = $("body").niceScroll({ preservenativescrolling: false, cursorwidth: '8px', cursorborder: 'none', cursorborderradius:'0px', cursorcolor:"#39CCDB", autohidemode: false, background:"#999999" }); 

If I set autohidemode to true, I don't see the default scrollbar in the browser. But I want the nicescroll panel to always be visible.

Does anyone know why this is happening? Thanks

Answer 1

Perhaps this may help you. This works for me.

 <script id="twitter-wjs" src="../js/widgets.js"></script> <script src="../js/jquery.min.js"></script> <script src="../js/jquery.easing.1.3.js"></script> <script src="../js/jquery.nicescroll.min.js"></script> <script> // 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", "visible"); var nice=$('html').niceScroll({cursorborder:"",cursorcolor:"#333333",cursorwidth:"8px", boxzoom:true, autohidemode:false}); }); </script> 

Answer 2

Here is an example of what you might need:

 if (jQuery().niceScroll) { $("html").niceScroll({ scrollspeed: 70, mousescrollstep: 38, cursorwidth: 15, cursorborder: 0, cursorcolor: '#0C090A', cursorborderradius: 0, autohidemode: true, horizrailenabled: false }); } 

Answer 3

My first thought is to make your .nicescroll classes overflow:hidden; elements overflow:hidden; inside your css, so the scrollbars will not appear,

than after your document loads (preferably on window.load), use the nicescroll plugin and set your elements to overflow:auto using jQuery, for example:

CSS

 .nicescroll{overflow:hidden;} 

JQuery

 $(window).load(function(){ $('.nicescroll').css({overflow:'auto'}); }); 

I think in your case you need to add an identifier or class (e.g. in my example) to your body element.