고정 div에서 jQuery 무한 스크롤 스크롤

Question

배경

고정 위치 div 내에 무한 스크롤링 테이블을 만들려고합니다. 문제는 내가 만났던 모든 솔루션이 화면 높이를 사용하고 문서 scrollTop을 사용하여 사용자가 화면 아래로 스크롤했는지 계산할 수 있다는 것입니다.

문제

I 사용자가 overflow: scroll; 세트 고정 DIV 아래쪽으로 스크롤 경우 계산할 수 jQuery 플러그인을 작성하는 것을 시도했다.

내 접근 방식은 테이블을 래핑하는 래퍼 div (고정 된 위치와 오버 플로우 : 스크롤을 가진 div)를 만들고, 또한 테이블의 아래쪽에 다른 div를 배치했습니다. 그런 다음 wrapper.scrollTop()이 래퍼가 스크롤 될 때마다 bottom div position.top보다 큰지 계산해보십시오. 그런 다음 새 레코드를로드하고 테이블 본문에 추가합니다.

$.fn.isScrolledTo = function() { 
    var element = $(this); 
    var bottom = element.find('.bottom'); 

    $(element).scroll(function() { 
     if (element.scrollTop() >= bottom.position().top) { 
      var tableBody = element.find("tbody"); 
      tableBody.append(tableBody.html()); 
     } 
    }); 
}; 

$('.fixed').isScrolledTo(); 

참조 예 http://jsfiddle.net/leviputna/v4q3a/

질문

은 분명히 내 현재의 예는 올바르지 않습니다. 내 질문은 사용자가 오버플로가있는 고정 된 div의 맨 아래로 스크롤 한 것을 감지하는 방법입니다 : 스크롤 세트? 내가 타이머 임계 값 스크롤 이벤트를 처리 할 코드를 수정 한

Answer 1

아래쪽 요소를 사용하는 것은 다소 어수선한 것 같아요. 대신 스크롤 가능 영역이 모두 소모되면 테스트 할 때 scrollHeight 및 height를 사용하지 않는 것이 좋습니다.

$.fn.isScrolledTo = function() { 

    var element = this, 
     tableBody = this.find("tbody"); 

    element.scroll(function(){ 
     if(element.scrollTop() >= element[0].scrollHeight-element.height()){ 
      tableBody.append(tableBody.html()); 
     } 
    }); 

}; 

$('.fixed').isScrolledTo(); 

EDIT (12/30/14) :

$.fn.whenScrolledToBottom = function (cback_fxn) { 
    this.on('scroll',this,function(){ 
     if(ev.data.scrollTop() >= ev.data[0].scrollHeight - ev.data.height()){ 
      return cback_fxn.apply(ev.data, arguments) 
     } 
    }); 
}; 

플러그인 사용법 :

플러그인의 건조기 버전은 훨씬 더 다시 사용할 수 있습니다

var $fixed = $('.fixed'), 
    $tableBody = $fixed.find("tbody"); 

$fixed.whenScrolledToBottom(function(){ 
    // Load more data.. 
    $tableBody.append($tableBody.html()); 
}); 

Answer 2

:

$.fn.isScrolledTo = function() { 
    var element = $(this); 
    var bottom = element.find('.bottom'); 


    $(element).scroll(function(){ 
     if (this.timer) clearTimeout(this.timer); 
     this.timer=setTimeout(function(){ 
     if(element.scrollTop() >= bottom.position().top){ 
      var tableBody = element.find("tbody"); 
      tableBody.append(tableBody.html()); 
     } 
     },300); 
    }); 


}; 

$('.fixed').isScrolledTo(); 

당신이 겪고있는 문제는 당신이 스크롤, 새로운 스크롤 이벤트가 생성되고 있다는 점이다. 코드에 다른 문제가있을 수 있지만 시작에 불과합니다.