CODEWITHSUNDEEP
jqueryajaxscroll
Marek Zygmunt
Marek Zygmunt

Reputation: 105

NiceScroll doesn't work after AJAX loading

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.

Upvotes: 6

Views: 10091

Answers (3)

RafaSashi
RafaSashi

Reputation: 17215

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

});

Upvotes: 3

Akshay Jindal
Akshay Jindal

Reputation: 385

Please you must use the below code to resolve your problem. It works fine with ajax load.

$("MYSCROLLCONTAINERS").getNiceScroll().remove();
$("div[id^='ascrail']").remove();
jQuery("MYSCROLLCONTAINERS").niceScroll({
                autohidemode:false
            });

This worked for me.

Upvotes: 0

InuYaksa
InuYaksa

Reputation: 726

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.

Upvotes: 15

Related Questions