Sprawdź, czy użytkownik przewinął do dołu

Tworzę system stronicowania (coś w rodzaju Facebooka), w którym treść ładuje się, gdy użytkownik przewija się do dołu. Wyobrażam sobie, że najlepszym sposobem na to jest znalezienie użytkownika na dole strony i uruchomienie zapytania ajax, aby załadować więcej postów.

Jedynym problemem jest to, że nie wiem, jak sprawdzić, czy użytkownik przewinął do dołu strony za pomocą jQuery. Jakieś pomysły?

Muszę znaleźć sposób, aby sprawdzić, czy użytkownik przewinął do dołu strony za pomocą jQuery.

Użyj .scroll()zdarzenia na window:

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

Możesz to przetestować tutaj , to pobiera górny zwój okna, więc o ile jest przewinięte w dół, dodaje wysokość widocznego okna i sprawdza, czy równa się to wysokości całej zawartości ( document). Jeśli zamiast tego chcesz sprawdzić, czy użytkownik jest blisko dna, wyglądałoby to mniej więcej tak:

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

Możesz przetestować tę wersję tutaj , po prostu dostosuj ją 100do dowolnego piksela od dołu, który chcesz uruchomić.

Odpowiedź Nicka Cravera działa dobrze, oszczędzając sobie problemu, że wartość $(document).height()zależy od przeglądarki.

Aby działało na wszystkich przeglądarkach, użyj tej funkcji Jamesa Padolseya :

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(), aby końcowy kod to:

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

Nie jestem do końca pewien, dlaczego nie zostało to jeszcze 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 wartość true, gdy znajdziesz 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');
    }
});

scrollHeightmają szerokie poparcie w przeglądarkach, czyli od 8 do być bardziej precyzyjne, natomiast clientHeighti scrollTopsą obsługiwane zarówno przez każdego. Nawet np. 6. To powinno być bezpieczne dla różnych przeglądarek.

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

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

Oznacza to, że kod zostanie uruchomiony tylko wtedy, gdy znajdziesz się w odległości 100 pikseli od dolnej krawędzi dokumentu. Nie powtórzy się, jeśli przewiniesz w górę, a następnie w dół, co może, ale nie musi być przydatne, w zależności od tego, do czego używasz kodu Nicka.

Oprócz doskonale przyjętej odpowiedzi Nicka Cravera możesz zdławić zdarzenie przewijania, aby nie było tak często uruchamiane, zwiększając w ten sposób 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 zostać nieco zmodyfikowana, aby działała na iOS 6 Safari Mobile i powinna brzmieć:

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

Wymiana pieniędzy $ (okno) .height () do window.innerHeight należy zrobić, ponieważ gdy pasek adresu jest ukryty dodatkowe 60px są dodawane do wysokości okna, ale stosując$(window).height()ma nie odzwierciedlać tę zmianę, podczas korzystaniawindow.innerHeightrobi.

Uwaga : window.innerHeightWłaściwość obejmuje również wysokość poziomego paska przewijania (jeśli jest renderowany), w przeciwieństwie do tego, $(window).height()który nie obejmuje wysokości poziomego paska przewijania. Nie stanowi to problemu w Mobile Safari, ale może powodować nieoczekiwane zachowanie w innych przeglądarkach lub przyszłych wersjach Mobile Safari. Zmiana ==na >=może rozwiązać ten problem w najczęstszych przypadkach użycia.

Przeczytaj więcej o window.innerHeightnieruchomoś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 elmjest element pobrany z np document.getElementById.

Oto fragment kodu, który pomoże ci debugować kod. Przetestowałem powyższe odpowiedzi i stwierdziłem, że są wadliwe. Mam następujące testy w 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>

Być może istnieje prostsze rozwiązanie, ale zatrzymałem się w punkcie, w którym TO DZIAŁAŁO

Jeśli nadal masz problemy z jakąś nieuczciwą przeglądarką, oto kod ułatwiający debugowanie:

<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 pozwoli komuś zaoszczędzić trochę czasu.

Sprawdź tę odpowiedź

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

Możesz footerHeight - document.body.offsetHeightsprawdzić, czy znajdujesz się w pobliżu stopki

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

Oblicza pasek przewijania odległości do dołu elementu. Równa się 0, jeśli pasek przewijania osiągnął dół.

To są moje dwa centy:

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

Pure JS z przeglądarką i zapowiadaniem (całkiem niezła 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, getDocHeightnie jest napisane przeze mnie

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

Moje rozwiązanie w zwykłym 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>

Wypróbuj to dla 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 mieć funkcje, które będą się powtarzać podczas przewijania lub nie będą działać, jeśli użytkownik powiększy okno. Wymyśliłem łatwą poprawkę właśnie matematyki. Na pierwszej wysokości i działa ona 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');
    }
});

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

offsetHeightpowinna podawać rzeczywistą widoczną wysokość elementu (w tym wypełnienie, margines i paski przewijania) i scrollHeightjest to cała wysokość elementu, w tym niewidoczne (przepełnione) obszary.

jQuery„s .outerHeight()powinno dać podobny wynik do JS użytkownika .offsetHeight- dokumentację w MDN na offsetHeightjest jasne o wsparcie cross-browser. Aby objąć więcej opcji, jest to bardziej kompletne:

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 w Firefoksie i Chrome, więc używam niestandardowych funkcji Milesa O'Keefe i medera omuralieva w następujący sposób:

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 centy, ponieważ zaakceptowana odpowiedź nie działała dla mnie.

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

Zamiast nasłuchiwać zdarzenia przewijania, użycie Intersection Observer jest niedrogim narzędziem do sprawdzania, czy ostatni element był widoczny w okienku ekranu (to znaczy, że użytkownik został przewinięty do dołu). Obsługuje także IE7 z polifillem .

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>

Pokażę 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 jak go używać:

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

Użyłem @ddanone answear i dodałem połączenie 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ące się ostrzeżenie 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 zadzwonisz $(window).height()

Zamiast tego użyj, window.innerHeightaby odzyskać wysokość okna. Niezbędne sprawdzenie powinno być:

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

Najwyraźniej działało dla mnie „ciało”, a nie „okno” jak to:

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


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

do kompatybilności z różnymi przeglądarkami użyj:

  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łaj funkcję 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
 }
 });