사용자가 맨 아래로 스크롤했는지 확인

사용자가 맨 아래로 스크롤 할 때 콘텐츠가로드되는 페이지 매김 시스템 (Facebook과 같은 정렬 시스템)을 만들고 있습니다. 가장 좋은 방법은 사용자가 페이지 하단에있을 때를 찾고 더 많은 게시물을로드하기 위해 ajax 쿼리를 실행하는 것입니다.

유일한 문제는 사용자가 jQuery를 사용하여 페이지 하단으로 스크롤했는지 확인하는 방법을 모른다는 것입니다. 어떤 아이디어?

사용자가 jQuery를 사용하여 페이지 하단으로 스크롤했을 때 확인하는 방법을 찾아야합니다.

다음 과 같은 .scroll()이벤트를 사용하십시오 window.

$(window).scroll(function() {
   if($(window).scrollTop() + $(window).height() == $(document).height()) {
       alert("bottom!");
   }
});

여기 에서 테스트 할 수 있습니다 . 창의 맨 위 스크롤이 걸리므로 스크롤되는 양이 얼마인지, 보이는 창의 높이를 추가하고 전체 내용의 높이 ( document) 와 같은지 확인합니다 . 사용자가 바닥 근처에 있는지 확인하려면 다음과 같이 보일 것입니다.

$(window).scroll(function() {
   if($(window).scrollTop() + $(window).height() > $(document).height() - 100) {
       alert("near bottom!");
   }
});

여기 에서 해당 버전을 테스트 할 수 있습니다100 . 하단에서 트리거하려는 픽셀로 조정 하십시오 .

Nick Craver의 답변은 잘 작동 $(document).height()하며 브라우저 의 가치가 다른 문제를 아끼지 않습니다.

모든 브라우저에서 작동하게하려면 James Padolsey 의이 기능을 사용하십시오 .

function getDocHeight() {
    var D = document;
    return Math.max(
        D.body.scrollHeight, D.documentElement.scrollHeight,
        D.body.offsetHeight, D.documentElement.offsetHeight,
        D.body.clientHeight, D.documentElement.clientHeight
    );
}

대신 $(document).height()최종 코드는 다음과 같습니다.

$(window).scroll(function() {
       if($(window).scrollTop() + $(window).height() == getDocHeight()) {
           alert("bottom!");
       }
   });

왜 이것이 아직 게시되지 않았는지 잘 모르겠지만 MDN의 문서 에 따르면 가장 간단한 방법은 기본 자바 스크립트 속성을 사용하는 것입니다.

element.scrollHeight - element.scrollTop === element.clientHeight

스크롤 가능한 요소의 맨 아래에 있으면 true를 반환합니다. 따라서 단순히 자바 스크립트를 사용하십시오.

element.addEventListener('scroll', function(event)
{
    var element = event.target;
    if (element.scrollHeight - element.scrollTop === element.clientHeight)
    {
        console.log('scrolled');
    }
});

scrollHeight동안 즉, 8, 더 정확히 말하면에서, 브라우저에서 폭 넓은 지원을 clientHeight하고 scrollTop양쪽 모두를 지원합니다. 심지어 6입니다. 이것은 브라우저 간 안전해야합니다.

Nick의 솔루션을 사용하고 반복적 인 경고 / 이벤트가 발생하는 경우 경고 예제 위에 코드 줄을 추가 할 수 있습니다.

$(window).scroll(function() {
   if($(window).scrollTop() + $(window).height() > $(document).height() - 100) {
       $(window).unbind('scroll');
       alert("near bottom!");
   }
});

즉, 코드는 문서 하단의 100px 내에 처음있을 때만 실행됩니다. 위로 스크롤 한 다음 아래로 스크롤하면 반복되지 않습니다. Nick의 코드를 사용하는 대상에 따라 유용 할 수도 있고 그렇지 않을 수도 있습니다.

Nick Craver의 탁월한 대답 외에도 스크롤 이벤트를 조절하여 너무 자주 발생하지 않도록 브라우저 성능을 향상시킬 수 있습니다 .

var _throttleTimer = null;
var _throttleDelay = 100;
var $window = $(window);
var $document = $(document);

$document.ready(function () {

    $window
        .off('scroll', ScrollHandler)
        .on('scroll', ScrollHandler);

});

function ScrollHandler(e) {
    //throttle event:
    clearTimeout(_throttleTimer);
    _throttleTimer = setTimeout(function () {
        console.log('scroll');

        //do work
        if ($window.scrollTop() + $window.height() > $document.height() - 100) {
            alert("near bottom!");
        }

    }, _throttleDelay);
}

Nick Craver의 답변은 iOS 6 Safari Mobile에서 작동하도록 약간 수정해야하며 다음과 같아야합니다.

$(window).scroll(function() {
   if($(window).scrollTop() + window.innerHeight == $(document).height()) {
       alert("bottom!");
   }
});

변경 $ (창) .height의을 () 에 window.innerHeight는 주소 표시 줄이 숨겨져있는 경우 추가로 60 픽셀이 윈도우의 높이에 추가 만 사용하고 있기 때문에 수행해야 $(window).height()않습니다 하지 이러한 변화를 반영 사용하는 동안, window.innerHeight않습니다.

참고 : window.innerHeight가로 스크롤 막대의 높이를 $(window).height()포함하지 않는 것과 달리 속성에 가로 스크롤 막대의 높이 (렌더 된 경우)도 포함됩니다. 이는 Mobile Safari에서 문제가되지 않지만 다른 브라우저 또는 이후 버전의 Mobile Safari에서 예기치 않은 동작을 일으킬 수 있습니다. 변경 ==하는 것은 >=가장 일반적인 사용의 경우에이 문제를 해결할 수 있습니다.

이 window.innerHeight숙박 시설 에 대한 자세한 내용은 여기를 참조하십시오

상당히 간단한 접근법이 있습니다.

const didScrollToBottom = elm.scrollTop + elm.clientHeight == elm.scrollHeight

예

elm.onscroll = function() {
    if(elm.scrollTop + elm.clientHeight == elm.scrollHeight) {
        // User has scrolled to the bottom of the element
    }
}

elmie에서 검색된 요소는 어디에 있습니까 document.getElementById?

다음은 코드 디버깅에 도움이되는 코드입니다. 위의 답변을 테스트 한 결과 버그가있는 것으로 나타났습니다. Chrome, IE, Firefox, IPad (Safari)에서 다음을 테스트했습니다. 테스트 할 다른 기기가 없습니다 ...

<script type="text/javascript">
   $(function() {
      $(window).scroll(function () {
         var docElement = $(document)[0].documentElement;
         var winElement = $(window)[0];

         if ((docElement.scrollHeight - winElement.innerHeight) == winElement.pageYOffset) {
            alert('bottom');
         }
      });
   });
</script>

더 간단한 해결책이있을 수 있지만 IT가 작동 하는 시점에서 멈췄습니다.

여전히 일부 불량 브라우저에 문제가있는 경우 디버깅에 도움이되는 코드가 있습니다.

<script type="text/javascript">
   $(function() {
      $(window).scroll(function () {
         var docElement = $(document)[0].documentElement;
         var details = "";
         details += '<b>Document</b><br />';
         details += 'clientHeight:' + docElement.clientHeight + '<br />';
         details += 'clientTop:' + docElement.clientTop + '<br />';
         details += 'offsetHeight:' + docElement.offsetHeight + '<br />';
         details += 'offsetParent:' + (docElement.offsetParent == null) + '<br />';
         details += 'scrollHeight:' + docElement.scrollHeight + '<br />';
         details += 'scrollTop:' + docElement.scrollTop + '<br />';

         var winElement = $(window)[0];
         details += '<b>Window</b><br />';
         details += 'innerHeight:' + winElement.innerHeight + '<br />';
         details += 'outerHeight:' + winElement.outerHeight + '<br />';
         details += 'pageYOffset:' + winElement.pageYOffset + '<br />';
         details += 'screenTop:' + winElement.screenTop + '<br />';
         details += 'screenY:' + winElement.screenY + '<br />';
         details += 'scrollY:' + winElement.scrollY + '<br />';

         details += '<b>End of page</b><br />';
         details += 'Test:' + (docElement.scrollHeight - winElement.innerHeight) + '=' + winElement.pageYOffset + '<br />';
         details += 'End of Page? ';
         if ((docElement.scrollHeight - winElement.innerHeight) == winElement.pageYOffset) {
             details += 'YES';
         } else {
             details += 'NO';
         }

         $('#test').html(details);
      });
   });
</script>
<div id="test" style="position: fixed; left:0; top: 0; z-index: 9999; background-color: #FFFFFF;">

나는 이것이 누군가를 구할 수 있기를 바랍니다.

이 답변을 확인 하십시오

 window.onscroll = function(ev) {
    if ((window.innerHeight + window.scrollY) >= document.body.offsetHeight) {
       console.log("bottom");
    }
};

footerHeight - document.body.offsetHeight바닥 글 근처에 있거나 바닥 글에 도달했는지 확인할 수 있습니다.

var elemScrolPosition = elem.scrollHeight - elem.scrollTop - elem.clientHeight;

요소의 하단까지의 거리 스크롤 막대를 계산합니다. 스크롤 막대가 아래쪽에 도달하면 0과 같습니다.

이것은 내 두 센트입니다.

$('#container_element').scroll( function(){
        console.log($(this).scrollTop()+' + '+ $(this).height()+' = '+ ($(this).scrollTop() + $(this).height())   +' _ '+ $(this)[0].scrollHeight  );
        if($(this).scrollTop() + $(this).height() == $(this)[0].scrollHeight){
            console.log('bottom found');
        }
    });

크로스 브라우저 및 디 바운싱 기능을 갖춘 순수 JS (Pretty good performance )

var CheckIfScrollBottom = debouncer(function() {
    if(getDocHeight() == getScrollXY()[1] + window.innerHeight) {
       console.log('Bottom!');
    }
},500);

document.addEventListener('scroll',CheckIfScrollBottom);

function debouncer(a,b,c){var d;return function(){var e=this,f=arguments,g=function(){d=null,c||a.apply(e,f)},h=c&&!d;clearTimeout(d),d=setTimeout(g,b),h&&a.apply(e,f)}}
function getScrollXY(){var a=0,b=0;return"number"==typeof window.pageYOffset?(b=window.pageYOffset,a=window.pageXOffset):document.body&&(document.body.scrollLeft||document.body.scrollTop)?(b=document.body.scrollTop,a=document.body.scrollLeft):document.documentElement&&(document.documentElement.scrollLeft||document.documentElement.scrollTop)&&(b=document.documentElement.scrollTop,a=document.documentElement.scrollLeft),[a,b]}
function getDocHeight(){var a=document;return Math.max(a.body.scrollHeight,a.documentElement.scrollHeight,a.body.offsetHeight,a.documentElement.offsetHeight,a.body.clientHeight,a.documentElement.clientHeight)}

데모 : http://jsbin.com/geherovena/edit?js,output

PS는 : Debouncer, getScrollXY, getDocHeight나에 의해 작성되지

나는 그것이 어떻게 작동하는지 보여주고 어떻게 할 것인가

일반 js의 내 솔루션 :

let el=document.getElementById('el');
el.addEventListener('scroll', function(e) {
    if (this.scrollHeight - this.scrollTop - this.clientHeight<=0) {
        alert('Bottom');
    }
});

#el{
  width:400px;
  height:100px;
  overflow-y:scroll;
}

<div id="el">
<div>content</div>
<div>content</div>
<div>content</div>
<div>content</div>
<div>content</div>
<div>content</div>
<div>content</div>
<div>content</div>
<div>content</div>
<div>content</div>
<div>content</div>
</div>

하단 끝으로 스크롤하면 일치 조건으로 시도하십시오.

if ($(this)[0].scrollHeight - $(this).scrollTop() == 
    $(this).outerHeight()) {

    //code for your custom logic

}

Nick은 잘 대답하지만 스크롤하는 동안 스스로 반복하거나 사용자가 창을 확대하면 전혀 작동하지 않는 기능이 있습니다. 첫 번째 높이에서 수학을 쉽게 고칠 수 있으며 가정 된대로 작동합니다.

    if (Math.round($(window).scrollTop()) + $(window).innerHeight() == $(document).height()){
    loadPagination();
    $(".go-up").css("display","block").show("slow");
}

다음 코드를 시도해보십시오

$("#dashboard-scroll").scroll(function(){
    var ele = document.getElementById('dashboard-scroll');
    if(ele.scrollHeight - ele.scrollTop === ele.clientHeight){
       console.log('at the bottom of the scroll');
    }
});

스크롤 가능한 요소를 확인할 때 정확한 결과를 제공합니다 (예 : 아닌 window).

// `element` is a native JS HTMLElement
if ( element.scrollTop == (element.scrollHeight - element.offsetHeight) )
    // Element scrolled to bottom

offsetHeight주어야 실제 표시 (패딩, 여백을 포함하는 소자의 높이 및 스크롤바)과 scrollHeight는 IS 전체 보이지 (오버플로) 영역을 포함하는 소자의 높이.

jQuery의는 .outerHeight()JS의 유사한 결과를 제공한다 .offsetHeight- MDN에서 문서를위한 offsetHeight자사의 크로스 브라우저 지원에 대한 불분명하다. 더 많은 옵션을 다루려면 다음과 같이하십시오.

var offsetHeight = ( container.offsetHeight ? container.offsetHeight : $(container).outerHeight() );
if  ( container.scrollTop == (container.scrollHeight - offsetHeight) ) {
   // scrolled to bottom
}

이 모든 솔루션이 Firefox 및 Chrome에서 작동하지 않으므로 Miles O'Keefe 및 meder omuraliev의 사용자 정의 기능을 다음 과 같이 사용합니다.

function getDocHeight()
{
    var D = document;
    return Math.max(
        D.body.scrollHeight, D.documentElement.scrollHeight,
        D.body.offsetHeight, D.documentElement.offsetHeight,
        D.body.clientHeight, D.documentElement.clientHeight
    );
}

function getWindowSize()
{
  var myWidth = 0, myHeight = 0;
  if( typeof( window.innerWidth ) == 'number' ) {
    //Non-IE
    myWidth = window.innerWidth;
    myHeight = window.innerHeight;
  } else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {
    //IE 6+ in 'standards compliant mode'
    myWidth = document.documentElement.clientWidth;
    myHeight = document.documentElement.clientHeight;
  } else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {
    //IE 4 compatible
    myWidth = document.body.clientWidth;
    myHeight = document.body.clientHeight;
  }
  return [myWidth, myHeight];
}

$(window).scroll(function()
{
    if($(window).scrollTop() + getWindowSize()[1] == getDocHeight())
    {
        alert("bottom!");
    }
});

받아 들여진 대답이 효과가 없었기 때문에 여기에 2 센트가 있습니다.

var documentAtBottom = (document.documentElement.scrollTop + window.innerHeight) >= document.documentElement.scrollHeight;

스크롤 이벤트를 듣는 대신, 교차 관찰자를 사용 하는 것이 뷰포트에서 마지막 요소가 보이는지 (즉, 사용자가 맨 아래로 스크롤되었다는 것을 확인 하는) 저렴한 방법 입니다. 또한 polyfill으로 IE7을 지원했습니다 .

var observer = new IntersectionObserver(function(entries){
   if(entries[0].isIntersecting === true)
      console.log("Scrolled to the bottom");
   else
      console.log("Not on the bottom");
}, {
   root:document.querySelector('#scrollContainer'),
   threshold:1 // Trigger only when whole element was visible
});

observer.observe(document.querySelector('#scrollContainer').lastElementChild);

#scrollContainer{
  height: 100px;
  overflow: hidden scroll;
}

<div id="scrollContainer">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
  <div>Item 4</div>
  <div>Item 5</div>
  <div>Item 6</div>
  <div>Item 7</div>
  <div>Item 8</div>
  <div>Item 9</div>
  <div>Item 10</div>
</div>

JQuery없이 접근 방식을 보여 드리겠습니다. 단순 JS 기능 :

function isVisible(elem) {
  var coords = elem.getBoundingClientRect();
  var topVisible = coords.top > 0 && coords.top < 0;
  var bottomVisible = coords.bottom < shift && coords.bottom > 0;
  return topVisible || bottomVisible;
}

사용 방법에 대한 간단한 예 :

var img = document.getElementById("pic1");
    if (isVisible(img)) { img.style.opacity = "1.00";  }

@ddanone answear를 사용하고 Ajax 호출을 추가했습니다.

$('#mydiv').on('scroll', function(){
  function infiniScroll(this);
});

function infiniScroll(mydiv){
console.log($(mydiv).scrollTop()+' + '+ $(mydiv).height()+' = '+ ($(mydiv).scrollTop() + $(mydiv).height())   +' _ '+ $(mydiv)[0].scrollHeight  );

if($(mydiv).scrollTop() + $(mydiv).height() == $(mydiv)[0].scrollHeight){
    console.log('bottom found');
    if(!$.active){ //if there is no ajax call active ( last ajax call waiting for results ) do again my ajax call
        myAjaxCall();
    }
}

}

Nick의 대답에 대한 반복 된 경고를 중지하려면

ScrollActivate();

function ScrollActivate() {
    $(window).on("scroll", function () {
        if ($(window).scrollTop() + $(window).height() > $(document).height() - 100) {
            $(window).off("scroll");
            alert("near bottom!");
        }
    });
}

Google 크롬은 전화하면 페이지의 전체 높이를 제공합니다. $(window).height()

대신, window.innerHeight창의 높이를 검색하는 데 사용 하십시오. 필요한 점검은 다음과 같아야합니다.

if($(window).scrollTop() + window.innerHeight > $(document).height() - 50) {
    console.log("reached bottom!");
}

분명히 나를 위해 일한 것은 다음과 같이 '창'이 아닌 '몸'이었습니다.

$('body').scroll(function() {


 if($('body').scrollTop() + $('body').height() == $(document).height()) {
     //alert at buttom
 }
 });

브라우저 간 호환성을 위해 :

  function getheight(){
    var doc = document;
    return  Math.max(
        doc.body.scrollHeight, doc.documentElement.scrollHeight,
        doc.body.offsetHeight, doc.documentElement.offsetHeight,
        doc.body.clientHeight, doc.documentElement.clientHeight

        );
   }

$ (document) .height () 대신 getheight () 함수를 호출하십시오.

$('body').scroll(function() {


   if($('body').scrollTop() + $('body').height() == getheight()  ) {
     //alert at bottom
 }
});

바닥 근처에서 사용 :

$('body').scroll(function() {


if($('body').scrollTop() + $('body').height() > getheight() -100 ) {
    //alert near bottom
 }
 });