Jquery Nice scroll not working

Question

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.

Solfa

sry ;-) i tought the current code state :-) – Geibel

hmm should work with simple $("#div-to-scroll").niceScroll(); ... strange – Geibel

id or class div-to-scroll ? ;-) – Geibel

sorry its id i forgot to change it – Solfa

Answer 1

Finally this works for me.

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

Solfa

Answer 2

for me works just with

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

Sword

Where did the mouseover come from? – Kirstenkirsteni

Answer 3

UPDATE: new function found!

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

Call this function to Update niceScroll

setScroll(".classWithNiceScroll");

Mccallister

Answer 4

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

Manisa

Yes that all i have done. the thing is when window load it works but after i start to append content its not working. – Solfa

@keyuratcodebins.com what happen after you append content? does it stop scrolling or it show all the content at the same time? – Manisa

@keyuratcodebins.com try using resize() function every time you scroll down – Manisa

I have the same problem, I found that if I switch tabs on chrome and go back it starts working. any ideas? – Suiting

Answer 5

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

To get the scroll bar on full body

Leonie

The 2nd line has an extra # . – Fibula

@Fibula Yes, Just follow the syntax. (Selector is immaterial here) – Leonie

Answer 6

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()

Strict