NanoScroller not triggering itself

Question

The code below should be able to trigger the pane and slider to appropriate display css properties according to nanoscroller documentation. However, the scroller doesn't show the slider until I do some action in browser such as pressing F12 to fireup firebug or right clicking an element inside to inspect it. What could possibly be going wrong?

        $(".nano").nanoScroller({
        alwaysVisible: true,
        scroll: "bottom"    
    });

Answer 1

It looks like at least on version v0.7.4 if you call nanoScroller() with arguments the initialization of the plug-in could fail, above all with dynamic content.

If you are using $('#yourDiv').animate() be sure the call to nanoScroller() is done when the animation is finished. The same if you are using $.getJSON(), do it after the content has be fetched properly. If you are using both animate() and getJSON() call nanoScroller() after both events because it is unknow which process is going to finish first and several calls to nanoScroller() will not spoil anything.

And here the workaround is: call first nanoScroller() with no arguments and right after call it again if you require arguments.

$('.nano').nanoScroller();
$('.nano').nanoScroller({ alwaysVisible: true, scroll: 'top' });

Answer 2

This problem appears when nanoscroller fails to initialize properly for the element.

Make sure the element having the class nano is not within a parent element which is hidden with display:none CSS property.

In another case if the content doesn't show up, you would like to make sure proper height has been set for the element having the class nano.

Answer 3

In some cases, like mine, the nanoScroller needs to know the picture width/height first to work properly.

How I fixed it:

Instead of calling the function, with/without the .ready handler,

$(".nano").nanoScroller({
    alwaysVisible: true,
    scroll: "bottom"     
});

try the .load handler. Now JQuery only loads nanoScroller when the width/height of the pictures are known.

$(window).load(function () {
    $(".nano").nanoScroller({
        alwaysVisible: true,
        scroll: "bottom"     
    });
});