スムーズスクロールのスクロール位置がLazyLoadのためにずれる

スムーズスクロールのスクロール位置がずれる。
原因はLazyLoadのためだ。
スクロール位置を計算した時点ではまだ画像が読み込まれていないため、間違った座標になってしまう。

画像の遅延読込でページ内リンクがずれる時の解決法【jQuery】 | KAITEKI CHOKIN」のコードを試した。
正しい位置にスクロールしたページもあったが、一部、正しい位置にスクロールできないページがあった。

上のコードは次のような処理になっている。

  1. スクロール位置を計算する。
  2. 計算した位置にスクロールする。
  3. スクロールが完了したら、もう一度スクロール位置を計算する。
  4. スクロール位置が現在の座標と違う場合は、計算した位置にスクロールする。

正しく動作しないページでは、スクロールが完了した時点で画像の読み込みが完了していないため、3のスクロール位置の再計算で正しい座標を得られないのではないか。

試しにスクロールしてから、画像の読み込みを1秒待ってみた。

$('a[href^="#"]').click(function(e) {
    var href = $(this).attr("href");
    var target = $(href == "#" || href == "" ? 'html' : href);
    var position = target.offset().top;

    $.when(
        $("html, body").animate({
            scrollTop: position
        }, 400, "swing"),
        e.preventDefault(),
    ).done(function() {
        setTimeout(function() {
            var diff = target.offset().top;
            if (diff === position) {
            } else {
                $("html, body").animate({
                    scrollTop: diff
                }, 10, "swing");
            }
        }, 1000);
    });
});

こうすると正しい位置にスクロールできた。

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください