9

たくさんのウィジェットがある忙しいウェブページがあります。時々ロードするのに1、2秒かかります。

ページの上部以外の場所から更新を押すと、ページがロードされたかのようscrollTop==0に、ある時点で元の位置にスナップバックすることがわかります。

問題は、.ready()イベントハンドラーで発生するさまざまな初期化があり、そのうちのいくつかはとに依存しscrollTopていることscrollLeftです。これらの初期化は、ドキュメントが元の位置に戻る前に行われ、元の位置から無意味な結果が得られます。

これらの初期化をイベントハンドラー内でラップすること.load()も機能していないようです。.load()動作するのは、ハンドラー内のsetTimeoutを介して（かなり長い）遅延を追加することです。これは明らかな理由で望ましくありません。

これは、「元の位置への復帰」が標準のイベントチェーンとは独立して発生することを示唆しています。ECMA標準で指定されていないか、ブラウザの実装に依存します。

ブラウザが元の位置に戻った後にのみ発生する必要がある初期化に対処するための最良の方法は何ですか？関連するイベントはありますか？更新が発生したことを認識し、その場合にのみ遅延する方法はありますか？

私のテストはすべてChromeとFirefoxで行われました。

4

2 に答える 2

2

「元の位置に戻る」動作は、標準化されたものではなく、ブラウザがボーナスとして追加した機能です。「ページの更新が原因でブラウザがスクロールした」という特定のイベントはないと思います。

ただし、ブラウザが正常に動作している場合は、スクロール時にonscrollイベントwindowが発生するはずです。これは必然的にページの読み込みイベントの後になります（そうでない場合、ブラウザにはスクロールするものがないため、読み込みイベントの後にスクロールイベントを探し、ページがブラウザによってスクロールされたと推測します。

ページが更新されず、onscrollイベントが発生しない場合は、正常に処理する必要があることに注意してください。したがって、（可能であれば）ページがスクロールされていないと想定し、 onscrollイベントが発生した場合は、新しい場所を念頭に置いて再配置して最初からやり直します。物事がロードされてからリロードされるところに少し「フラッシュ」がありますが、これはコールバックの非同期の性質を処理します。

于 2013-01-17T18:53:42.910 に答える
1

これは（あなたが言っていたように）標準的なイベントではないので、ロード/リフレッシュ後に現在その0ポイントを超えていることを確認するために、迅速な反復テストを実行できる小さなシステムを作成することをお勧めします。ウィジェットなどのコードを実行します。

var scrollTopInterval;

$(window).load(function () {
  var i = 0;

  scrollTopInterval = setInterval( function () {
    console.log( $(window).scrollTop() );

    if ($(window).scrollTop() > 0) {
      weAreReady(); // do stuff, we are ready to go
      clearInterval(t);
    }

    i++;

    // 2 seconds might be way too much (but you said you needed a long delay)
    if (i >= 2000) { clearInterval(scrollTopInterval); }
  }, 1);
});

function weAreReady() {
   alert('we moved down past 0 after refresh');
}

さらに、ユーザーがスクロールを開始した場合（ページが最初に読み込まれたときなど）、この間隔をクリアするようにしてください。

$(window).scroll(function () { 
   clearInterval(scrollTopInterval);
});

これがjsFIddleです。もちろん、jsFiddleで更新することはできません。そのため、コードをコピーしてhtmlファイルなどにコピーするだけです（これがテストの方法です）。

すでにページの一番上にいる場合はすべて問題なく、さらに下に行くと0がポップアップ表示され、数字が大きくなり、すぐにアラートが表示されます（残りを実行するために関数を呼び出します）。ページの）。

于 2013-01-17T18:57:59.633 に答える