Sprawdź, czy użytkownik przewijał na dół

Nie jestem do końca pewien, dlaczego to jeszcze nie zostało opublikowane, ale zgodnie z dokumentacją z MDN, najprostszym sposobem jest użycie natywnych właściwości javascript:

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

Zwraca true, gdy znajdujesz się na dole dowolnego przewijalnego elementu. Więc po prostu używając javascript:

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

scrollHeight mają szerokie wsparcie w przeglądarkach, od ie 8, aby być bardziej precyzyjnym, podczas gdy clientHeight i scrollTop są obsługiwane przez wszystkich. Nawet ie 6. Powinno to być bezpieczne w przeglądarce.

Odpowiedź Nicka Cravera działa dobrze, oszczędź sobie problemu, że wartość $(document).height() różni się w zależności od przeglądarki.

Aby działać na wszystkich przeglądarkach, użyj tej funkcji z 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
    );
}

Zamiast $(document).height(), tak aby końcowy kod brzmiał:

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

Dla osób korzystających z rozwiązania Nicka i otrzymujących powtarzające się alerty / zdarzenia, można dodać wiersz kodu powyżej przykładu alertu:

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

Oznacza to, że kod będzie uruchamiany tylko wtedy, gdy po raz pierwszy znajdziesz się w odległości 100px od dolnej części dokumentu. Nie powtórzy się, jeśli przewiniesz do góry, a następnie z powrotem w dół, co może, ale nie może być przydatne w zależności od tego, do czego używasz kodu Nicka.

Kontynuując doskonałą akceptowaną odpowiedź od Nicka Cravera, możesz zdławić Zdarzenie scroll tak, aby nie było uruchamiane tak często, dzięki czemu zwiększając wydajność przeglądarki :

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);
}

Odpowiedź Nicka Cravera musi być nieco zmodyfikowana, aby działać na iOS 6 Safari Mobile i powinna brzmieć:

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

Zmiana $(okno).wysokość() na okno.innerHeight należy to zrobić, ponieważ gdy pasek adresu jest ukryty, dodatkowe 60px są dodawane do wysokości okna, ale użycie $(window).height() nie odzwierciedla , a nie odzwierciedla tę zmianę, podczas gdy użycie window.innerHeight tak.

Uwaga : właściwość window.innerHeight obejmuje również poziomy pasek przewijania wysokość (jeśli jest renderowana), w przeciwieństwie do $(window).height(), która nie zawiera wysokości poziomego paska przewijania. Nie jest to problem w mobilnej Safari, ale może spowodować nieoczekiwane zachowanie w innych przeglądarkach lub przyszłych wersjach mobilnej Safari. Zmiana == na >= może naprawić to dla większości typowych przypadków użycia.

Przeczytaj więcej o window.innerHeight nieruchomości tutaj

Oto dość proste podejście

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

Przykład

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

Gdzie elm jest elementem pobranym z TJ document.getElementById.

Oto fragment kodu, który pomoże Ci debugować kod, przetestowałem powyższe odpowiedzi i stwierdziłem, że są wadliwe. Mam przetestować następujące NA Chrome, IE, Firefox, IPad (Safari). Nie mam żadnych innych zainstalowanych do testowania...

<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>

Może być prostsze rozwiązanie, ale zatrzymałem się w momencie, w którym zadziałało

Jeśli nadal masz problemy z jakąś nieuczciwą przeglądarką, oto kod, który pomoże Ci debugować:

<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;">

Mam nadzieję, że to kogoś uratuje czas.

Proszę sprawdzić tę odpowiedź

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

Możesz zrobić footerHeight - document.body.offsetHeight, aby sprawdzić, czy jesteś w pobliżu stopki lub dotarłeś do stopki

To moje dwa grosze:

$('#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');
        }
    });

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

Oblicza odległość paska przewijania do dołu elementu. Równe 0, jeśli pasek przewijania osiągnął dno.

Pure JS with cross-browser and debouncing (całkiem dobra wydajność )

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)}

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

PS: Debouncer, getScrollXY, getDocHeight nie napisane przeze mnie

po prostu pokazuję, jak to działa i jak to zrobię

Moje rozwiązanie w prostym 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>

Spróbuj użyć warunku dopasowania, jeśli przewiń do dolnego końca

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

    //code for your custom logic

}

Nick odpowiada dobrze, ale będziesz miał funkcje, które powtarzają się podczas przewijania lub w ogóle nie będą działać, jeśli użytkownik ma powiększone okno. Wymyśliłem łatwą poprawkę tylko z matematyki.okrągły pierwszej wysokości i działa tak, jak zakładano.

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

Możesz wypróbować następujący kod,

$("#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');
    }
});

Zamiast nasłuchiwać zdarzenia scroll, za pomocą Intersection Observer {[5] } jest niedrogi do sprawdzenia, czy ostatni element był widoczny na viewporcie (oznacza to, że użytkownik został przewinięty na dół). Obsługuje również IE7 z polyfill .

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>

Daje to dokładne wyniki podczas sprawdzania przewijalnego elementu (tzn. nie window):

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

offsetHeight Należy podać rzeczywistą widoczną Wysokość elementu (w tym padding, margin, i paski przewijania), a scrollHeightto Cała Wysokość elementu, w tym niewidoczne (przepełnione) obszary.

jQuery's .outerHeight() powinno dać podobny wynik do JS .offsetHeight -- dokumentacja w MDN dla offsetHeight jest niejasna co do jego obsługi między przeglądarkami. Na cover more options, this is more complete:

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

Wszystkie te rozwiązania nie działają dla mnie na Firefoksie i Chrome, więc używam niestandardowych funkcji z Miles O ' Keefe i meder omuralev tak:

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!");
    }
});

Oto moje dwa grosze, ponieważ zaakceptowana odpowiedź nie zadziałała na mnie.

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

Wiele innych rozwiązań nie działa na mnie, ponieważ na przewijaniu do dołu mój div wyzwalał alert 2 razy, a przy przesuwaniu w górę również wyzwalał do kilku pikseli, więc rozwiązaniem jest:

        $('#your-div').on('resize scroll', function()
        {
            if ($(this).scrollTop() +
                $(this).innerHeight() >=
                $(this)[0].scrollHeight + 10) {

                alert('reached bottom!');
            }
        });

Pozwól mi pokazać approch bez JQuery. Prosta funkcja 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;
}

Krótki przykład użycia:

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

Użyłem @ ddanone answear i dodałem wywołanie 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();
    }
}

}

Aby zatrzymać powtarzający się alert o odpowiedzi Nicka

ScrollActivate();

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

Google Chrome podaje pełną wysokość strony, jeśli wywołasz $(window).height()

Zamiast tego użyj window.innerHeight, Aby pobrać wysokość okna. Konieczne sprawdzenie powinno być:

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

Widocznie u mnie działało "ciało" a nie "okno" w ten sposób:

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


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

Dla kompatybilności między przeglądarkami:

  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

        );
   }

A następnie zamiast $(document).height() wywołanie funkcji getheight ()

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


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

Do użytku w pobliżu dna:

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


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

Użyłem tego testu, aby wykryć zwój dotarł do dołu: event.target.scrollTop === event.target.scrollHeight - event.target.offsetHeight