web-dev-qa-db-ja.com

jQueryのエンドレススクロールの代替手段

JQueryエンドレススクロールプラグインに代わるものはありますか？

http://www.beyondcoding.com/2009/01/15/release-jquery-plugin-endless-scroll/

jqueryjquery-pluginsscroll
19
Hussein

たとえば 無限スクロールプラグイン

5
Gidon

これはプラグインなしで同じトリックを行う必要があります

$(window).scroll(function () { 
   if ($(window).scrollTop() >= $(document).height() - $(window).height() - 100) {
      //Add something at the end of the page
   }
});

編集2014年1月15日

@pereのコメントによると、過剰な量のイベント発生を回避するために、以下のコードを使用することをお勧めします。

この回答からインスピレーションを得た https://stackoverflow.com/a/13298018/15372

var scrollListener = function () {
    $(window).one("scroll", function () { //unbinds itself every time it fires
        if ($(window).scrollTop() >= $(document).height() - $(window).height() - 100) {
            //Add something at the end of the page
        }
        setTimeout(scrollListener, 200); //rebinds itself after 200ms
    });
};
$(document).ready(function () {
    scrollListener();
});
61
Ergec

Ergecの答えとPereのコメントを組み合わせる：

function watchScrollPosition(callback, distance, interval) {
    var $window = $(window),
        $document = $(document);

    var checkScrollPosition = function() {
        var top = $document.height() - $window.height() - distance;

        if ($window.scrollTop() >= top) {
            callback();
        }
    };

    setInterval(checkScrollPosition, interval);
}

distanceは、コールバックが発生するときの画面の下からのピクセル数です。

intervalは、チェックが実行される頻度です（ミリ秒単位、250〜1000が妥当です）。

7
Alf Eaton

思い通りの仕上がりが見つからなかったので、一から作りました。一時停止機能があるので、スクロールしても無限に読み込まれ続けることはありません。時々誰かがページフッターを見たいと思うかもしれません。 「もっと見る」ボタンを追加するだけで、追加を続行できます。また、localStorageを組み込んだので、ユーザーがクリックして離れても、結果での位置が失われることはありません。

http://www.hawkee.com/snippet/9445/

また、新しく追加された結果を操作するために呼び出すことができるコールバック関数もあります。

3
Hawkee

これにより、イベントが発生する前にユーザーがページの下部に到達するバグに対処する必要があります。私のプロジェクトでこれを見ていましたが、すでにページの下部にいる場合は、イベントを初期化する前に確認する必要があります。

var scrollListener = function () {
    executeScrollIfinBounds();
    $(window).one("scroll", function () { //unbinds itself every time it fires
       executeScrollIfinBounds();
        setTimeout(scrollListener, 200); //rebinds itself after 200ms
    });
};
$(document).ready(function () {
    scrollListener();
});

function executeScrollIfinBounds()
{
     if ($(window).scrollTop() >= $(document).height() - $(window).height() - 100) {
            //Add something at the end of the page
        }
}
1
johnny 5