9

I am using Jquery nice Scroll bar for div, but when content of div increases dynamically its not showing scroll bar. Windows default scroll bar works fine if i remove nice scroll. Can anyone help me to solve this problem?

Html

<div id="div-to-scroll">
</div>

Script

$(document).ready(function(e) {
    var nice = $("#div-to-scroll").getNiceScroll();
    $("#div-to-scroll").niceScroll();
    $("#div-to-scroll").getNiceScroll().resize();
});

this is my code sample.

4
  • sry ;-) i tought the current code state :-)
    – stetro
    Aug 8, 2012 at 10:46
  • hmm should work with simple $("#div-to-scroll").niceScroll(); ... strange
    – stetro
    Aug 8, 2012 at 10:58
  • id or class div-to-scroll ? ;-)
    – stetro
    Aug 8, 2012 at 10:59
  • sorry its id i forgot to change it
    – gaurang171
    Aug 8, 2012 at 11:01

6 Answers 6

18

Finally this works for me.

$("#div-to-scroll").scroll(function(){
  $("#div-to-scroll").getNiceScroll().resize();
});
11

for me works just with

$("#div-to-scroll").mouseover(function() {
    $("#div-to-scroll").getNiceScroll().resize();
});
1
  • Where did the mouseover come from? Dec 5, 2012 at 17:45
2

UPDATE: new function found!

 var setScroll = function(i) {
        if($(i).length>0)
        $(i).niceScroll().updateScrollBar();
} 

Call this function to Update niceScroll

setScroll(".classWithNiceScroll");
1

Some possible reasons:
1- Maybe you forgot to specify your div height. fix your div Height.
2- also if your div is float in width fix that width too.
Remmember that your DIV STYLE should have: overflow-y: hidden;
UPDATE
try using resize() function every time you scroll down:

$("div-to-scroll").slideDown(function(){
  $("div-to-scroll").getNiceScroll().resize();
});
4
  • Yes that all i have done. the thing is when window load it works but after i start to append content its not working.
    – gaurang171
    Aug 8, 2012 at 11:28
  • @keyuratcodebins.com what happen after you append content? does it stop scrolling or it show all the content at the same time?
    – osyan
    Aug 8, 2012 at 12:11
  • @keyuratcodebins.com try using resize() function every time you scroll down
    – osyan
    Aug 8, 2012 at 12:27
  • I have the same problem, I found that if I switch tabs on chrome and go back it starts working. any ideas? Oct 10, 2012 at 3:39
1

Do this:

// Scroll X Axis 
$("#mydiv").getNiceScroll()[0].doScrollLeft(x, duration);
// Scroll Y Axis - 
$("#mydiv").getNiceScroll()[0].doScrollTop(y, duration);

or:

// Scroll X Axis 
$("#mydiv").getNiceScroll(0).doScrollLeft(x, duration);
// Scroll Y Axis - 
$("#mydiv").getNiceScroll(0).doScrollTop(y, duration);

Note [0] after getNiceScroll()

0
1
$("html").mouseover(function() {
    $("html").getNiceScroll().resize();
});

To get the scroll bar on full body

2
  • The 2nd line has an extra # .
    – Raptor
    Aug 25, 2015 at 9:24
  • 1
    @Raptor Yes, Just follow the syntax. (Selector is immaterial here)
    – Banty Roy
    Aug 25, 2015 at 11:37

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.