스크롤이 80%에 도달하면 에이잭스 로드

스크롤이 80%에 도달하면 에이잭스 로드

스크롤바가 bottom에 도달했을 때 동작하는 다음 코드를 사용하고 있습니다.

if($(window).scrollTop() == $(document).height() - $(window).height()){

하지만 100이 아니라 70%에 도달했을 때 에이잭스가 발사됐으면 좋겠어

현재 체크가 페이지 하단으로 스크롤될 때 실행 중인 경우 다음과 같은 기본적인 산술을 시도할 수 있습니다.

if ($(window).scrollTop() >= ($(document).height() - $(window).height())*0.7){
                                          //where 0.7 corresponds to 70% --^

여러 Ajax 요청을 동시에 실행하지 않으려면 확인란을 추가해야 합니다.

이는 질문의 범위 밖이지만 여러 요청이 동시에 발생하는 것을 방지하는 방법의 예를 보려면 다음 절차를 수행합니다.

글로벌 var를 선언합니다.processing.

그런 다음 기능에 통합합니다.

if (processing)
    return false;

if ($(window).scrollTop() >= ($(document).height() - $(window).height())*0.7){
    processing = true; //sets a processing AJAX request flag
    $.post("url", '<params>', function(data){ //or $.ajax, $.get, $.load etc.
        //load the content to your div
        processing = false; //resets the ajax flag once the callback concludes
    });
}

이것은 스크롤 기능에 대한 액티브한 Ajax 요구가 있는지 여부를 추적하기 위해 var를 사용하는 간단한 예입니다.또한 Ajax 요구의 동시 처리를 방해하지 않습니다.

편집: JSFiddle 예시

%를 사용하여 문서 높이를 측정하는 것은 좋지 않을 수 있습니다. 이는 문서를 로드할 때마다 문서 높이가 증가하여 페이지 하단에서 상대적으로 더 멀리 Ajax 요청이 트리거되기 때문입니다(절대 크기 사용).

다음을 방지하기 위해 고정 값 오프셋을 사용하는 것이 좋습니다(200-700 정도).

if ($(window).scrollTop() >= $(document).height() - $(window).height() - 700){
                                 // pixels offset from screen bottom   --^

예: JSFiddle

편집: 첫 번째 코드에서 문제를 백분율로 재현하려면 50을 로드합니다.div한 번 해보겠습니다.다음 로드 시div전체 문서 높이에 2%만 추가됩니다. 즉, 이 2%를 문서 높이의 70%로 스크롤하면 바로 다음 요청이 트리거됩니다.이 고정 예에서는 사용자가 화면 하단에서 정의된 절대 픽셀 범위에 있을 때만 정의된 하단 오프셋이 새 콘텐츠를 로드합니다.

빠른 구글 검색get percentage scrolled down첫 번째 결과로서 이 페이지가 표시됩니다(아래의 코드와 함께, 어느 쪽이든 원하는 것을 실행).여기 묻기 전에 조사를 해보지 않으신 것 같은데요.

$(document).scroll(function(e){

    // grab the scroll amount and the window height
    var scrollAmount = $(window).scrollTop();
    var documentHeight = $(document).height();

    // calculate the percentage the user has scrolled down the page
    var scrollPercent = (scrollAmount / documentHeight) * 100;

    if(scrollPercent > 50) {
        // run a function called doSomething
       doSomething();
    }

    function doSomething() { 

        // do something when a user gets 50% of the way down my page

    }

});

언급URL : https://stackoverflow.com/questions/10662528/load-ajax-when-scroll-reaches-80