jquery - AJAX のロード後に NiceScroll が機能しない

Question

Nice Scroll に問題があります。正常に動作しますが、AJAX 画像をロードすると動作しません。興味深いことに、ウィンドウのサイズを変更したり、Firebug を開いたりすると、機能し始めます。

これを自動的に行うにはどうすればよいですか?

私は試した：

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

AJAX 読み込み機能の後ですが、動作しません。

Answer 1

divのコンテンツが変更された場合は、nicescrollresizeメソッドを呼び出す必要があります。

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

画像サイズがimgタグで設定されていない場合は、すべての画像が完全に読み込まれたときにサイズ変更を呼び出す必要があることに注意してください。

Answer 2

InuYaksa の回答に加えて、実装にアクセスできない場合は、回避策としてコンテンツ ラッパーにマウスオーバー機能を実装するだけです。

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

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

改善されたマウスオーバー ソリューション

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

ビューポート/ラップの使用

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

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

    widget_viewport.getNiceScroll(widget_wrap).resize();

});

Answer 3

問題を解決するには、以下のコードを使用する必要があります。ajax ロードで問題なく動作します。

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

これは私にとってはうまくいきました。