jquery nicescroll

Question

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

score 4 · Answer 1 · answered Jan 15 '13 at 06:12

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>

MinCarve · Answer 2 · 2015-12-11T18:59:47.577

1

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
    });
}

edited Dec 11 '15 at 18:59

answered Nov 12 '15 at 15:51

MinCarve

75
1
3
15

score 0 · Answer 3 · answered Sep 17 '12 at 23:17

0

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.

answered Sep 17 '12 at 23:17

Roko C. Buljan

196,159
39
305
313

Hi. Thanks. It's a good idea. But doesnt work because (and I dont know why) the scroll bar from nicescroll doesn't show up. It is only visible the default scroll bar from the browser – saomi Sep 18 '12 at 22:21
@user794035 mh, really sorry to hear that. Tried my best as I still have not experiences with this plugin. But as soon I'll need it and find a solution (or perhaps - create my own) you'll be the first to know – Roko C. Buljan Sep 18 '12 at 22:47
OK thanks. When I saw your code for me it make sense, but perhaps the problem is that the nicescroll reads the height of the .nicescroll when the document is ready. But I tried to call him after the window is loaded but I got the same results. Thanks – saomi Sep 19 '12 at 08:22

Rejowan Ahmed · Answer 4 · 2020-06-28T12:59:04.027

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;
}

jquery nicescroll

4 Answers4