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.

hmm should work with simple $("#div-to-scroll").niceScroll(); ... strange — stetro, Aug 08 '12 at 10:58

score 18 · Accepted Answer · answered Aug 09 '12 at 04:37

18

Finally this works for me.

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

answered Aug 09 '12 at 04:37

gaurang171

9,032
4
28
30

score 11 · Answer 2 · edited Dec 05 '12 at 17:45

11

for me works just with

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

edited Dec 05 '12 at 17:45

Troy Alford

26,660
10
64
82

answered Dec 05 '12 at 17:28

Karolis Gerbauskas

111
1
3

Where did the `mouseover` come from? – Blazemonger Dec 05 '12 at 17:45

score 2 · Answer 3 · answered Feb 01 '14 at 12:44

2

UPDATE: new function found!

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

Call this function to Update niceScroll

setScroll(".classWithNiceScroll");

answered Feb 01 '14 at 12:44

Code Spy

9,626
4
66
46

osyan · Answer 4 · 2012-08-08T12:26:47.167

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

edited Aug 08 '12 at 12:26

answered Aug 08 '12 at 11:10

osyan

1,784
2
25
54

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 08 '12 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 08 '12 at 12:11
@keyuratcodebins.com try using resize() function every time you scroll down – osyan Aug 08 '12 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? – Mark McCook Oct 10 '12 at 03:39

Banty Roy · Answer 5 · 2015-08-25T11:36:03.097

1

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

To get the scroll bar on full body

edited Aug 25 '15 at 11:36

answered Jul 17 '13 at 08:00

Banty Roy

914
6
23

The 2nd line has an extra `#` . – Raptor Aug 25 '15 at 09:24
1

@Raptor Yes, Just follow the syntax. (Selector is immaterial here) – Banty Roy Aug 25 '15 at 11:37

score 1 · Answer 6 · edited Oct 13 '14 at 13:48

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

edited Oct 13 '14 at 13:48

Kaiido

123,334
13
219
285

answered Oct 13 '14 at 13:13

Sandeep

11
1

Jquery Nice scroll not working

6 Answers6

Linked