HTML 테이블의 "끝없는 스크롤"효과 [폐쇄

StackOverflow https://stackoverflow.com/questions/216588

문제

웹 페이지에 스크롤 된 데이터 테이블을 표시하고 있습니다. 이 테이블에는 수천 개의 동적 행이 있으므로 서버에서 AJAX를 통해로드됩니다.

사용자는 위아래로 스크롤 할 수 있으므로 필요한 것은 사용자가 스크롤바 끝에 도달하면 감지합니다. 더 많은 데이터를 요청하고 표시하기 위해 (즉, 테이블 하단의 마지막 행).

주어진 피드에서 마지막 게시물로 아래로 스크롤하면 Google이 요청하고 새로운 게시물을 투명하게 표시 할 때 Google Reader 에서이 효과를 찾을 수 있지만이를 달성하는 방법을 알 수는 없습니다.

그건 그렇고, 지금 나는 Yui 데이터 가능

도움이 되었습니까?

해결책

답변 해주셔서 감사합니다. 그것이 나의 최종 작업 코드입니다 (Greg에서 영감을 얻었습니다. ajaxian.com), 그것은 일부 jQuery 함수를 사용하고 Yui 데이터 가능.

$(".yui-dt-bd").scroll(load_more);

function load_more() {              
    if ($(this).scrollend()) {
        alert("SCROLL END REACHED !");
        // TODO load more data
    }
}

$.fn.scrollend = function() {
    return this[0].scrollHeight - this[0].scrollTop - this.height() <= 0;
}

다음 단계는 내 자신을 구현하는 것입니다 Yui Paginator Yui 구성 요소와의 완전한 통합을 달성하려면 :)

다른 팁

사용중인 특정 요소에 익숙하지 않지만 전체 크기 창에서이를 구현하려면 다음을 수행 할 수 있습니다.

$wnd.onscroll = function() {
    if (($wnd.height - $wnd.scrollTop) < SOME_MARGIN) then doSomething();
};

ScrollTop이 본질적으로 "몇 개의 픽셀이 스크롤 된 수"인 경우. 나는 당신이 함께 일하는 테이블에 이것을 적용한다고 가정합니다.

방금 Google을 검색 하여이 기사를 찾았습니다. Ajax, JavaScript 및 XML로 동적 스크롤 구현. 철저한 설명처럼 보입니다.

당신은 그것이 작동하는 것을 볼 수 있습니다 여기 유만 만. 위에서 제안한 솔루션 중 하나와 달리 스크롤 바는 지속적으로 움직입니다. 위치와 크기는 볼 수있는 영역의 실제 크기와 위치를 반영하며 스크롤 바가 바닥에 도달하면 다음 배치를로드하지 않습니다. 스크롤 바는 전체 레코드의 마지막이보기 영역의 맨 아래에있을 때만 바닥에 도달합니다. 물론, 이것은 얼마나 많은 레코드가 있는지 알고있는 경우에만 효과가 있습니다.

Firebug에서 Dom Properties를 통해 읽는 동안 눈에 띄는 속성이 있습니다. scrollY (DOM 탭 아래의 Firebug에서 이동하십시오 content > scrollY) 창에 스크롤하기 위해 남은 픽셀의 양인 것으로 보입니다. 이것이 스크롤 가능한 요소를 위해 만들어 졌는지 확인하십시오. 그런 다음 Yuval의 기능을 사용하여 새 데이터를로드 할 수 있습니다.

ick. 끝없는 스크롤의 큰 팬이 아닙니다. 사람들이 웹의 작동 방식에 대해 사람들이하는 주요 가정 중 일부를 깨뜨립니다. 다음 조건에서만 구현할 것을 약속하십시오.

1) 멋진 긴 테이블에 모든 것을로드하는 완벽하게 좋은 페이지로 대체하지 않고 사용자가 CTRL-F를 사용하여 프린지가 켜진 시간 동안 페이지 내부를 검색 할 수 있습니다.

2) 스크롤 된 각 덩어리의 맨 아래에 광고를 삽입 할 계획이 없습니다.

3) 맹인 사람들과 JavaScript 비활성화로 웹을 탐색하는 사람들을위한 작업 폴백 (다시 멋진 긴 테이블이 있습니다)을 제공하고 있습니다.

Yui를 사용하는 경우 a 테이블 스 크롤 벤트 테이블이 스크롤하면 발사됩니다. 이것을 DataTable의 GenerateRequest 함수와 결합하면 테이블 스 크롤 벤트 데이터 세트가 끝날 때 요청을 시작합니다.

Yui Doc 은이 사례에 대한 구체적인 예를 가지고 있지 않지만 귀하에게 보여줍니다. 데이터를 처리하는 방법 GenerateRequest에 의해 반환되었습니다

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top