1

ページの一番下までスクロールすると、ページ上のより多くのアイテムをロードする関数を実行する関数を構築しようとしています。

コンテンツのないdivを入れることから始めました

<div id="loadMore"></div>

そして、ここでスクロールを見る別の関数を見つけました

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

    console.log(docViewTop, docViewBottom, elemTop, elemBottom);
    return ((elemBottom >= docViewTop) && (elemTop <= docViewBottom) && (elemBottom <= docViewBottom) && (elemTop >= docViewTop));

}

$(window).scroll(function() {   

    if(isScrolledIntoView($('#loadMore')))
    {
        alert("reached");
        return false;

    }    
});

1つの問題は、アラートに到達するのが早すぎるように見えることと、もう1つの主な問題は、アラートが画面に何度も「到達」することです-機能を1回だけ実行したいので、これは明らかに悪いです...

次に、他のコンテンツにロードされ、ページの下部に再び到達した場合、機能（たとえば、アラート）が再び実行されます

私はこれについて最善の方法をとっていますか？誰でも助けることができますか？

ありがとう

4

2 に答える 2

6

スクロール機能を使用する場合、スクロールされるピクセルごとにイベントが 1 回トリガーされるため、注意が必要です。したがって、タイムアウトを使用して、スクロールが停止したときにのみ関数を呼び出す必要があります。

この例を試してください：

let $window = $(window);
let scrollTimer = null;

let isScrolledIntoView = (elem) => {
  let $elem = $(elem);
  let docViewTop = $window.scrollTop();
  let docViewBottom = docViewTop + $window.height();
  let elemTop = $elem.offset().top;
  let elemBottom = elemTop + $elem.height();

  console.log(docViewTop, docViewBottom, elemTop, elemBottom);
  return ((elemBottom >= docViewTop) && (elemTop <= docViewBottom) && (elemBottom <= docViewBottom) && (elemTop >= docViewTop));
}

$(window).scroll(function() {
  clearTimeout(scrollTimer);

  scrollTimer = setTimeout(function() {
    if (isScrolledIntoView($('#loadMore'))) {
      console.log("'Reached' element is visible");
    }
  }, 100);
});
.spacer {
  height: 2000px;
  border-left: 2px solid #C00;
  margin-left: 5px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
Scroll down...
<div class="spacer"></div>
<div id="loadMore">Reached</div>
<div class="spacer"></div>

繰り返しスクロールが完了するまでアクションを遅らせるパターンは、「デバウンス」と呼ばれることに注意してください。

于 2013-10-24T09:16:19.073 に答える
1

関数を一度だけバインドする必要があります。ページに新しいアイテムを追加した後、さらにアイテムが利用可能かどうかを確認し、この関数を再度バインドすることができます。

var addNewContent = function () {
    // get new data
    // append new data
    $('#content').prepend($('<div style="height: 1000px;">some content</div>'));

    // rebind the event, if still more data is available
    $('#content').one( 'endofcontent', addNewContent);
};

$('#content').one("endofcontent", addNewContent);

$(window,document).scroll(function() {

    if(isScrolledIntoView($('#loadMore'))) {
        $('#content').trigger("endofcontent");
        return false;
    }
});

テストしてください: http://fiddle.jshell.net/d5CSd/

于 2013-10-24T09:46:43.333 に答える