0

コンテンツの長さに応じてスクロール バーを使用する要素にスクロール イベントをバインドする場合、スクロール バーを必要としない新しいコンテンツで要素を更新する前に部分的にスクロールすると、スクロール イベントが発生しているように見えます。

説明するのが少し難しいので、次の例をまとめました。

var searchList = $('#search-list');
searchList.on('scroll', function() {
     console.log('scrollHandler...');   
});

$('#reload').on('click', function() {
    console.log('reloadSearchList...');

    searchList.html('Updated content.');
});

http://jsfiddle.net/ttL8W/

「奇妙な」動作を再現するには、次の手順に従ってください。

テスト 1 (期待どおりに正常に動作します):

  • スクロール バーには触れずに、「リロード ボタン」をクリックしてください。リロード ボタンのハンドラーのみがトリガーされます。

テスト 2 (スクロール イベントがトリガーされるため、動作がおかしい):

  • リストを少し下にスクロールします。
  • 「リロードボタン」をクリックします。

これは意図したとおりに機能していますか、それともバグですか?

4

1 に答える 1

0

これは、ブラウザーscrollTopが div のオフセットを維持しようとするために発生します。

コンテンツを短いテキスト (コンテンツ < 親および最大scrollTopオフセット = 0) に置き換えると、ブラウザーがスクロールして 0 に戻る必要があるため、スクロール イベントが発生します。

目的の結果に応じて、コンテンツを置き換える前に、それを無視する (そして scrollOffset を維持する) か、自分でリセットすることができます。

$('#reload').on('click', function() {
    searchList.prop('scrollTop', 0);

    console.log('reloadSearchList...');
    searchList.html('Updated content.');
});

これでもonScrollイベントが呼び出されますが、動作は一貫しています。onScrollイベントリスナーを発生させたくない場合は、無効にするか、ハンドラーをパラメーター化できます (手動で呼び出されたときに実行されないようにします)。

于 2013-06-14T09:24:46.800 に答える