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

667

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.

Jasio
źródło
To zabawne, próbuję dowiedzieć się, która funkcja jest wywoływana, gdy przewijam do dołu, aby móc zablokować tę irytującą „funkcję”.
endolith,
W przypadku rozwiązania
React.js

Odpowiedzi:

1023

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

Nick Craver
źródło
32
Jak zwykle dotrzesz tam przede mną. W każdym razie, do OP, jeśli masz kontener postów, użyj jego identyfikatora zamiast „okna”, możesz też chcieć zmienić ostatnią .height () na scrollHeight
Christian
4
Alert wywołań Firefox („bottom!”); wiele razy (działa dobrze z Chrome i Safari)
Marco Matarazzi
3
to trochę błędne, jeśli zrobisz console.log()zamiast ostrzeżenia, czasami powtarza polecenie.
Jürgen Paul
19
Dobrą kombinacją @KevinVella Vella jest użycie tego z _.debounce () w narzędziu podkreślania, aby zapobiec jego uruchamianiu, dopóki użytkownik nie przestanie przewijać - underscorejs.org/#debounce -
JohnnyFaldo
3
@NickCraver jest dostępna implementacja czystego js?
Dewsworld
116

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!");
       }
   });
Miles O'Keefe
źródło
6
Zaktualizował nieco skompresowaną funkcją wersji 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); }
Drew
ostrzega mnie, gdy osiągnę górę, a nie dół (Chrome).
Damien Roche,
Może być lepiej użyć minzamiast max, zwłaszcza jeśli i tak jest margines, aby uniknąć przypadkowego zapobiegania przewijaniu się użytkownika do tego, co według Ciebie jest na dole strony.
Solomon Ucko
104

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.

Félix Gagnon-Grenier
źródło
1
Pamiętaj, że w niektórych sytuacjach może tak nie być. Firefox 47 zgłasza, że ​​klient textarea ma wysokość 239, a powyższe równanie daje 253 po przewinięciu w dół. Może padding / border lub coś na to wpływa? Tak czy inaczej, dodanie trochę miejsca na poruszanie się nie zaszkodzi var isAtBottom = ( logField.scrollHeight - logField.scrollTop <= logField.clientHeight + 50 );. Jest to przydatne do automatycznego przewijania pola tylko wtedy, gdy jest ono już na dole (aby użytkownik mógł ręcznie zbadać określoną część dziennika w czasie rzeczywistym bez utraty swojego miejsca itp.).
Beejor,
Dodałbym, że możliwe jest zwracanie fałszywych negatywów, ponieważ jedna strona może zwrócić mały ułamek dziesiętny, podczas gdy druga strona zwraca liczbę całkowitą (np. 200.181819304947I 200). Dodałem, Math.floor()aby pomóc sobie z tym poradzić, ale nie wiem, jak wiarygodne to będzie.
Hanna
1
Dla mnie to nie działa w różnych przeglądarkach. Otrzymuję zupełnie inne wyniki na Chrome w porównaniu do Firefoxa.
Tadej
1
Próbowałem tego na elemencie <body>, który jest uruchamiany, gdy przeglądarka jest przewijana do GÓRY, a nie do dołu.
Chris Sobolewski
10
Math.abs(element.scrollHeight - element.scrollTop - element.clientHeight) <= 3.0(zamień 3.0 na dowolną tolerancję pikseli, którą uważasz za odpowiednią w danych okolicznościach). Jest to właściwy sposób, ponieważ (A) clientHeight, scrollTopi clientHeightwszystkie są zaokrąglone, co może potencjalnie prowadzić do błędu 3px, jeśli wszystkie wyrównyją, (B) 3 piksele są prawie niewidoczne dla użytkownika, więc użytkownik może pomyśleć, że coś jest nie tak z twoją witryną kiedy „myślą”, że znajdują się na dole strony, a tak naprawdę nie są, i (C) niektóre urządzenia (zwłaszcza bez myszy) mogą mieć dziwne zachowanie podczas przewijania.
Jack Giffin
50

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.

Tim Carr
źródło
1
Chciałbym tylko skomentować i powiedzieć, gdzie jest ten wiersz kodu, ponieważ jest on odpowiedni dla odpowiedzi innej osoby, ale +1 w intencji!
Nate-Wilkins
Niestety nie mogłem (i nadal nie mogę) zobaczyć, jak dodać komentarz do odpowiedzi (tak jak tutaj).
Tim Carr
Tak, nowi użytkownicy nie mogą dodawać komentarzy do postów, chyba że uzyskasz więcej przedstawicieli.
Nate-Wilkins
Z drugiej strony, jeśli możesz umieścić inny test, jeśli istnieje zmiana, którą chcesz wprowadzić w skrypcie, powiedzmy, że klasa została zastosowana do div. Spowoduje to, że drugie zagnieżdżone zostanie uruchomione, jeśli nie zostało uruchomione.
1934286
jak mogę wybrać konkretny identyfikator div zamiast całego okna?
James Smith
40

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);
}
George Filippakos
źródło
Należy prawdopodobnie zauważyć, że wymaga to Underscore.js: underscorejs.org . To jednak bardzo dobra uwaga. Zdarzenie przewijania powinno być prawie zawsze ograniczone, aby uniknąć poważnych problemów z wydajnością.
Jude Osborn,
Może to tylko ja i przydałby się test porównawczy, ale nie podoba mi się pomysł wywoływania clearTimeout i setTimeout przy każdym zdarzeniu przewijania. Wydałbym 1 setTimeout i dodałbym kilku strażników w tym module obsługi. To prawdopodobnie tylko mikrooptymalizacja (jeśli w ogóle).
Grimace of Despair
To naprawdę fajny dodatek! Mogę wymyślić jeszcze jedną poprawę. Obecnie funkcja sprawdzająca wysokość nie będzie działać, jeśli użytkownik będzie kontynuował przewijanie. Jeśli jest to problem (np. Chcesz uruchomić funkcję, gdy użytkownik przewinął do połowy, niezależnie od tego, czy przewija dalej), możesz łatwo upewnić się, że funkcja jest rzeczywiście wywoływana, a jednocześnie zabrania wielu połączeń w wybranym okresie. Oto sedno, aby to pokazać. gist.github.com/datacarl/7029558
datacarl
Co? Wywołać ładunek maszyny, aby zapobiec prostemu obliczeniu? Nie rozumiem, jak to jest w ogóle bardziej wydajne
Rambatino
37

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

Yosi
źródło
window.innerHeight miał więcej sensu dzięki temu, co starałem się osiągnąć dzięki!
Amir5000,
Jak uzyskać pozostałą wysokość po przewinięciu?
OPV
20

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.

Frederik Witte
źródło
17

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.

Talon
źródło
Najlepsza odpowiedź dla Vanilla js, Brak rozwiązania jQuery. Użyjvar docElement = document.documentElement; var winElement = window
jperelli
To w 2019 roku. Zamiast winElement.pageYOffsetciebie możesz również użyć winElement.scrollY.
Noel Abrahams,
15

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

Junaid Qadir
źródło
12
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ół.

Wasyl Gutnyk
źródło
1
Zrobiłem następujące i działałem bezbłędnie. Dzięki. var shouldScroll = (elem.scrollHeight - elem.scrollTop - elem.clientHeight) == 0;
jiminssy
11

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');
        }
    });
ddanone
źródło
Próbowałem użyć twojego rozwiązania, działa dobrze, ale w przypadkach, gdy element ma wypełnienie - nie działa, ponieważ oblicza czystą wysokość elementu, bez uwzględnienia wypełnienia, aby to rozwiązać, zmieniłem to $(this).scrollTop() + $(this).height() == $(this)[0].scrollHeight=>$(this).scrollTop() + $(this).outerHeight(true) >= $(this)[0].scrollHeight
Taras Chernata
6

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ę

L2aelba
źródło
Doskonały. Testowane w Firefox i Chrome
Erlisar Vasquez,
Pojawia się następujący błąd: Oczekiwano 3 argumentów, ale otrzymałem 2. Argument „c” nie został podany.
Sõber
6

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>

Bakos Bence
źródło
4

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

}
Hiren Patel
źródło
3

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");
}
Florin Andrei
źródło
3

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');
    }
});
Shahrukh Anwar
źródło
2

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
}
Yuval A.
źródło
spróbuj Math.floor(element.scrollTop) === element.scrollHeight - element.offsetHeightna wypadek, gdyby scrollTop był liczbą dziesiętną, bez której nie zadziałaMath.floor()
Michail Michailidis
1

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!");
    }
});
Hayj
źródło
1

Oto moje dwa centy, ponieważ zaakceptowana odpowiedź nie działała dla mnie.

var documentAtBottom = (document.documentElement.scrollTop + window.innerHeight) >= document.documentElement.scrollHeight;
Vince Panuccio
źródło
1

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>

StefansArya
źródło
Problem z Intersection Observer polega na tym, że jeśli okno początkowe jest stosunkowo małe (powiedzmy podstawowy układ przed pobraniem obrazów bez paska przewijania), oddzwanianie jest natychmiast uruchamiane. Scroll słuchacz faktycznie czeka na przewinięcie osoby. Pasek przewijania nie pojawi się przed pobraniem pierwszej partii obrazów itp. Intersection Observer to nie wszystko w jednym rozwiązaniu.
Aleks
@Aleks Możesz zadzwonić do .observe(...)nasłuchiwania zdarzenia, na przykład gdy użytkownik unosi / dotknie kontenera przewijania, aby nie zadziałał natychmiast.
StefansArya
0

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";  }
Aleksiej Zababurin
źródło
5
To nie odpowiada na pytanie. Pytanie brzmiało, jak wykryć, że użytkownicy przewinęli okno do samego końca. Twój kod sprawdza, czy dany element jest widoczny.
Peter Hall
0

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

}

Henrique C.
źródło
0

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!");
        }
    });
}
Arun Prasad ES
źródło
0

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!");
}
alierdogan7
źródło
0

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
 }
 });
GeniusGeek
źródło