1

次のjQuery関数があります。これは、要素が最初にページ上にスクロールして表示されたときに検出することになっています。

function isScrolledIntoView(elem) {
    var docViewTop = $(window).scrollTop();
    var docViewBottom = docViewTop + $(window).height();

    var elemTop = $(elem).offset().top;
    var elemBottom = elemTop + $(elem).height();

    return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop));
}

今日は頭がおかしい…どうすればこの機能が使えるの？

いつ表示されるかを検出したいと$('.guardrail360')します。

4

3 に答える 3

2

スクロールイベントをバインドし、そのイベントが発生したときに検出を行う必要があるようです。

$(window).scroll(function () { 
  isScrolledIntoView('.guardrail360');
});
于 2012-11-07T21:32:15.907 に答える
2

それを行うにはいくつかの方法があります。window.scrollユーザーエクスペリエンスやパフォーマンスに関心がある場合は、単純な実装を使用しないでください。

ウィンドウスクロールイベントにハンドラーをアタッチすることは、非常に、非常に、悪い考えです。ブラウザによっては、scrollイベントが頻繁に発生する可能性があり、scrollコールバックにコードを入れると、ページをスクロールしようとする試みが遅くなります（お勧めできません）。結果としてスクロールハンドラーのパフォーマンスが低下すると、全体的なスクロールのパフォーマンスが悪化するだけです。代わりに、何らかの形式のタイマーを使用してXミリ秒ごとにチェックするか、スクロールイベントを添付して、遅延後（または、指定された回数の実行後、さらに遅延後）にのみコードを実行する方がはるかに優れています。

-ejohn.orgのjQueryの作成者であるJohnResig

方法1：setInterval

まず、タイマーを使用した単純なアプローチがあります。

var $el = $('.guardrail360');

var timer = setInterval(function() {
    if (isScrolledIntoView($el)) {
        // do stuff

        // to run this block only once, simply uncomment the next line:
        //clearInterval(timer);
    }
}, 150);

方法2：window.scrollイベント

次に、スクロールイベントを使用する、些細でありながらクレイジーな非効率的な方法があります（ブラウザーによっては、スクロールイベントは毎秒数百回発生するため、ここで多くのコードを実行する必要はありません。特に、トリガーするコードは実行しないでください。ブラウザのリフロー/再描画）。

ページを下にスクロールするのが遅くてぎくしゃくしていると感じたサイトにアクセスしたことがありますか？これは多くの場合、次のようなコードが原因で発生します。

var $el = $('.guardrail360');

$(window).on('scroll', function() {
    if (isScrolledIntoView($el)) {
        // do stuff
    }
});

方法3：両方の長所

前述のブログ投稿でJohnResigによって提案された、トラフィックの多いサイト向けの気の利いたハイブリッドアプローチ：

var $el = $('.guardrail360'),
    didScroll = false;

$(window).scroll(function() {
    didScroll = true;
});

var timer = setInterval(function() {
    if ( didScroll ) {
        didScroll = false;
        if (isScrolledIntoView($el)) {
            // do stuff

            // to run this block only once, simply uncomment the next line:
            //clearInterval(timer);
        }
    }
}, 250);

方法4：スロットル/デバウンス

スロットリング（呼び出し間の最小Nミリ秒）またはデバウンス（「バースト」ごとに1回の呼び出しのみ）パターンを使用して、内部コードの実行速度を効率的に制限することもできます。Ben AlmanのjQueryスロットル/デバウンスプラグインを使用すると仮定すると、コードは次のようになります。

var $el = $('.guardrail360');

// Throttling
$(window).on('scroll', $.throttle( 250, function(){
    if (isScrolledIntoView($el)) {
        // do stuff
    }
}));

// Debouncing
$(window).on('scroll', $.debounce( 250, function(){
    if (isScrolledIntoView($el)) {
        // do stuff
    }
}));

（デバウンスの動作は他の実装とは少し異なることに注意してください。ただし、ユーザーエクスペリエンスのシナリオによっては、それが必要な場合もあります）

于 2012-11-07T21:32:42.553 に答える
0 
if ( isScrolledIntoView('.guardrail360') ) {

}

他の回答で示唆されているように、あなたはに基づいて行動する必要があります$(window).scroll()。さらに、要素が最初にスクロールされて表示されるときにifステートメントを実行するために、次のrun_once関数を作成しました。

$('window').on('scroll', function() {

    if ( isScrolledIntoView('.guardrail360') ) run_once(function() {
            // ...
    });

});

function run_once( callback ) {

    var done = false;

    return function() {

        if ( !done ) {

            done = true;

            return callback.apply( this, arguments );

        }

    };

}
于 2012-11-07T21:31:01.117 に答える