NiceScroll doesn't work after AJAX loading

Question

I have a problem with Nice Scroll. It works fine, but when I load AJAX images it doesn't work. Interestingly, when I resize the window, open Firebug or whatever, it starts to work.

What can I do to do this automatically?

I tried:

setTimeout(function(){
    $("window").trigger('resize');
}, 0);

After the AJAX loading function, but it doesn't work.

Answer 1

When content on your div changes you need to call nicescroll resize method.

$("your-div-name").getNiceScroll().resize()

Keep in mind if image size is not set in img tag, you need to call resize when all images are fully loaded.

Answer 2

In addition to InuYaksa's answer If you have no access on the implementation, you can just implement the mouseover function on the content wrapper as a workaround.

// Call resize whenever mouse
$("#scroll-area").mouseover(function() {
  $("#scroll-area").getNiceScroll().resize();
});

from: http://eureka.ykyuen.info/2013/05/07/jquery-nicescroll-plugin-doesnt-work-for-dynamic-content/

Improved mouseover solution

//in the case of scrolling content loaded via AJAX
    $(document).on('mouseover','#scroll-area', function () {
       $(this).getNiceScroll().resize();
    });

Using viewport/wrap

$(document).on('mouseover','#scroll-wrap', function () {

    var widget_wrap=$(this);
    var widget_viewport=$(this).parent();

    widget_viewport.getNiceScroll(widget_wrap).resize();

});