NiceScroll.js Resizing not working

Question

I am facing the error while loading dynamic data from a gallery plugin, the nicescroller doesn't shows up. The scroller is not visible but if i right click to inspect any element or use the zoom property of the chrome browser, it automatically shows up.

Here's what I've tried:

<script type="text/javascript">
    $(document).ready(function() { 
        $("html").niceScroll({cursorcolor:"#000000", cursorwidth:"10px", cursoropacitymin:"0", zindex:"99999", scrollspeed:"120"});

        $("#my-div").scroll(function(){
            $("#my-div").getNiceScroll().resize();
        });
    });
</script>

Any help would be much appreciated...

score 0 · Answer 1 · answered May 05 '15 at 00:43

You need to instantiate niceScroll on #my-div first (you have only instantiated it on html):

<script type="text/javascript">
    $(document).ready(function() { 
        $("html").niceScroll({cursorcolor:"#000000", cursorwidth:"10px", cursoropacitymin:"0", zindex:"99999", scrollspeed:"120"});

        $("#my-div").niceScroll({cursorcolor: "#333",
                                 cursoropacitymin: 0.3,
                                 background: "#bbb",
                                 cursorborder: "0"}); 
    });
</script>

Now you can call $("#my-div").getNiceScroll().resize();, however I don't know why you're adding a function on scroll. You need to add the resize call wherever in your code you're updating the contents of $("#my-div") from the gallery plugin, either after the update or through a callback.

NiceScroll.js Resizing not working

1 Answers1