0

長いスクロールサイトで現在アクティブになっているdivを確認して、location.hashを更新しようとしています。これはChromeで正常に動作しますが、FirefoxとIEでは失敗します。console.logでテストしましたが、コンソールでIDを確認できますが、これをロケーションハッシュにフィードしようとすると、スクロールがページ上で機能しなくなるか、予期せずジャンプします。

$(window).scroll(function () {
$('div').each(function(){
    if (
      $(this).attr('class')=='article' && $(this).offset().top < window.pageYOffset + 10 
    && $(this).offset().top + $(this).height() > window.pageYOffset + 10
    ) {
       window.location.hash = $(this).attr('id')
    }
});

});
4

1 に答える 1

2

最初に、スクロール イベントが 1 秒間に何度も発生することを理解する必要があります。それをDOMの検索に使用している方法論と組み合わせます...すべてを探してからdiv、それらすべてを必要なものにフィルターし、divこれを1秒間に何度も実行します...ブラウザーを不必要に過負荷にしています。

この簡単なデモでウィンドウをスクロールして、スクリプトが実行される頻度を確認してください。http://jsfiddle.net/tRx2P/

DOM で同じ要素を繰り返し検索する場合、それらを変数にキャッシュすると、パフォーマンスが大幅に向上します。DOM の検索は、要素を含むキャッシュされた変数の検索よりもはるかにコストがかかります

/* use jQuery selector that already filters out all the other `div` in page*/
var $articles= $('.article');
/* now use the variable inside your functions*/
$( window).scroll(function(){
    $articles.each(.....
    /* use the same cache principles for "$(this)" to help avoid needless function calls*/
})

ここで非常に重要な部分は、これらをチェックする必要がある 1 秒あたりの回数を減らす必要があるということです。ユーザーがまだスクロールしている間にハッシュを複数回更新してもメリットはありません...そしてそれを行うためにブラウザを過負荷にします

このデモの変更は、ユーザーが 300 ミリ秒スクロールしなかった場合にのみコードを起動します。タイムアウト遅延http://jsfiddle.net/tRx2P/2/を常に設定することでこれを行います

これらの概念を自分のコードに適応させることができるはずです

于 2012-11-05T03:45:52.923 に答える