간단한 무한 스크롤 효과 구현

Question

내 Wordpress 블로그의 내비게이션입니다. 사용자가 (정말 버튼 아니다, 그러나 h1 태그) "로드 게시물"버튼을 클릭하면

는 아약스 스크립트는 홈 페이지에로드되는 게시물을 발생합니다.

사용자가 페이지 맨 아래로 스크롤 할 때 게시물이 자동으로로드되도록이 동작을 변경하고 싶습니다.

는

아약스 포스트 이벤트를 트리거 기능은 다음과 같습니다 :이 변경을 구현하려는

$(".home #more_posts").click(function(e) { 
    $("#more_posts .loader").animate({opacity: 1},200); 
    $.post('<?php bloginfo('siteurl') ?>/wp-admin/admin-ajax.php', { 
     action: 'and_action', 
     off: offset+number, 
     pagenumber: page_number, 
     query_post: '&orderby=date&order=<? echo $order_post ?>&category_name=<? echo $_POST['category'] ?>' 
    } , (.....) 
}); 

이유는 inifinite 스크롤 이벤트를 달성하는 것입니다.

Answer 1

답변을 얻지 못하면 나를 더 깊이 파고 해결책을 찾게되었습니다.

이것은 단순한 무한 스코어 효과를 얻기 위해 수행 한 작업입니다. 나는 이것이 이것이 어떤 사람들에게 도움이되기를 바랍니다. "스크롤"을 "클릭"당신이에서 이동 -

1. 그냥 loadNextPage() 기능을 트리거 매우 간단 이벤트를 변경할 부분은 :

   var now = new Date().getTime(); 
   $(window).on('scroll', function() { 
       if ($(window).scrollTop() >= $(document).height() - $(window).height() - 400) {  
        if (new Date().getTime() - now > 1000) { 
         loadNextPage(); 
         now = new Date().getTime(); 
       } 
   
   function loadNextPage() 
   { 
       (...) 
       $(window).scrollTop(position - 500); 
   } 
   

   따로 따로 암호를 해독 할 수 있습니다.

2. 그런 다음 브라우저 스크롤 막대가 문서의 맨 아래에서 400 (px)이면 조건부가 발생합니다.
3. 이제 new Date() 개체가있는 파트입니다. 이 조건은 스크롤 다운마다 loadNextPage() 기능이 여러 번 트리거되지 않도록합니다. 이 조건은 각 트리거 사이에 최소한 loadNextPage()의 간격이 있어야한다고 말합니다.
4. 마지막으로 loadNextPage() 함수의 끝에서 .on("scoroll") 이벤트의 첫 번째 조건이 연속적으로 일치하지 않도록 스크롤바를 조금 위로 이동하지만 사용자가 loadNextPage()으로 다시 스크롤해야합니다.