CODEWITHSUNDEEP
jqueryjquery-pluginsnicescroll
saomi
saomi

Reputation: 885

jquery nicescroll

I'm using nicescroll plugin. http://areaaperta.com/nicescroll/

I have just a little doubt. When the page is loaded I can see my default scroll bar from the browser, and then the nicescroll bar it is showed. I want to apply the nicescroll bar to all the 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 the autohidemode to true, I don't see the default scroll bar from the browser. But I want to make the nicescroll bar always visible.

Does anyone know why this is happening?? Thanks

Upvotes: 5

Views: 31326

Answers (4)

Rejowan Ahmed
Rejowan Ahmed

Reputation: 1

Okay! Here's a solution from me. I had same issue. I applied so many methods but they didn't work for me. Then after searching for weeks I found this solution. I am using the latest version of niceScroll and it's v-3.7.6

Html:-

<div id="scrollable-div">
  <div class="content"></div>
</div>

CSS:-

/*Adding overflow hidden*/
.scrollable-div{
  overflow: hidden;
}

Yes its that easy. Just give your scrollable div a overflow: hidden. You don't need to use any Javascript code for it.

In your case you can simply do this:

body{
 overflow: hidden;
}

Upvotes: 0

MinCarve
MinCarve

Reputation: 25

here is an example of what you might want:

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

Upvotes: 1

user1979388
user1979388

Reputation: 41

Maybe this might help you. It 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>

Upvotes: 4

Roko C. Buljan
Roko C. Buljan

Reputation: 206344

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

than after your document loads (preferabily on window.load) apply the nicescroll plugin and set your elements to overflow:auto with jQuery like:

CSS:

.nicescroll{overflow:hidden;}

jQuery:

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

I think in your case you'd have to add an ID or a class (like in my example) to your body element.

Upvotes: 0

Related Questions