2012-10-16 24 views
5

Nice Scrollに問題があります。それはうまく動作しますが、AJAXイメージを読み込むと動作しません。興味深いことに、ウィンドウのサイズを変更したり、Firebugなどを開いたりすると、動作が開始されます。AJAXの読み込み後にNiceScrollが機能しない

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

私が試した:AJAXローディング機能後

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

を、それが動作しません。

+0

たぶんを包みますjax要求が完了しました。 Ajaxリクエストのsuccessイベントハンドラで素敵なスクロールを初期化してみてください。 – Tariqulazam

+0

問題は、ホームページ(Ajaxがロードされている場所)に移動しても動作しますが、静的ページ(連絡先など)に移動してから、ajaxをロードするメニュー項目をクリックすると、私は窓の大きさを変える瞬間です。 –

+0

私たちが見るためにあなたのコードをフィドルに含めることは可能ですか? – Tariqulazam

答えて

12

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

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

画像サイズがimgタグで設定されていない場合は、すべての画像が完全に読み込まれたらサイズ変更を呼び出す必要があります。

0

問題を解決するには、以下のコードを使用する必要があります。それはajaxの負荷で正常に動作します。

これは私のために働いた。

2

InuYaksaの回答に加えて実装にアクセスできない場合は、回避策としてコンテンツラッパーにmouseover関数を実装することができます。

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

/あなたがAの前に素敵なスクロールを初期化している、

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

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

    widget_viewport.getNiceScroll(widget_wrap).resize(); 

}); 
関連する問題