javascript - Hvordan oppdage om nettleservinduet er rullet til bunnen?

Jeg trenger å oppdage om en bruker har scrollet til bunnen av en side. Hvis de er nederst på siden, når jeg legger til nytt innhold nederst, vil jeg automatisk scrolle dem til den nye bunnen. Hvis de ikke er nederst, leser de tidligere innhold høyere opp på siden, så jeg vil ikke auto-scrolle dem siden de ønsker å bli der de er.

Hvordan kan jeg oppdage om en bruker har scrollet til bunnen av siden eller om de har scrollet høyere på siden?

Svar #1

window.onscroll = function(ev) {
    if ((window.innerHeight + Math.round(window.scrollY)) >= document.body.offsetHeight) {
        // you're at the bottom of the page
    }
};

Se demo

Svar #2

Oppdatert kode for støtte av alle større nettlesere (inkludert IE10 og IE11)

window.onscroll = function(ev) {
    if ((window.innerHeight + window.pageYOffset) >= document.body.offsetHeight) {
        alert("you're at the bottom of the page");
    }
};

Problemet med det nåværende aksepterte svaret er at window.scrollY ikke er tilgjengelig i IE.

Her er et sitat fra mdn angående scrollY:

For kryss-nettleser kompatibilitet, bruk window.pageYOffset i stedet for window.scrollY.

Og et fungerende utdrag:

window.onscroll = function(ev) {
    if ((window.innerHeight + window.pageYOffset ) >= document.body.offsetHeight) {
        alert("you're at the bottom of the page");
    }
};
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>

Notat for Mac

Basert på @Raphaëls kommentar, var det et problem på Mac på grunn av en liten forskyvning.
Følgende oppdaterte tilstand fungerer:

(window.innerHeight + window.pageYOffset) >= document.body.offsetHeight - 2

Jeg hadde ikke sjansen til å teste det videre, hvis noen kan kommentere dette spesifikke problemet, vil det være flott.

Svar #3

Det aksepterte svaret fungerte ikke for meg. Dette gjorde det:

window.onscroll = function(ev) {
    if ((window.innerHeight + window.scrollY) >= document.body.scrollHeight) {
      // you're at the bottom of the page
      console.log("Bottom of page");
    }
};

Hvis du ønsker å støtte eldre nettlesere (IE9), bruk aliaset window.pageYOffset som har litt bedre støtte.

Svar #4

Jeg lette etter et svar, men har ikke funnet et eksakt ett. Her er en ren JavaScript-løsning som fungerer med nyeste Firefox, IE og Chrome på tidspunktet for dette svaret:

// document.body.scrollTop alone should do the job but that actually works only in case of Chrome.
// With IE and Firefox it also works sometimes (seemingly with very simple pages where you have
// only a <pre> or something like that) but I don't know when. This hack seems to work always.
var scrollTop = (document.documentElement && document.documentElement.scrollTop) || document.body.scrollTop;

// Grodriguez's fix for scrollHeight:
// accounting for cases where html/body are set to height:100%
var scrollHeight = (document.documentElement && document.documentElement.scrollHeight) || document.body.scrollHeight;

// >= is needed because if the horizontal scrollbar is visible then window.innerHeight includes
// it and in that case the left side of the equation is somewhat greater.
var scrolledToBottom = (scrollTop + window.innerHeight) >= scrollHeight;

// As a bonus: how to scroll to the bottom programmatically by keeping the horizontal scrollpos:
// Since window.innerHeight includes the height of the horizontal scrollbar when it is visible
// the correct vertical scrollTop would be
// scrollHeight-window.innerHeight+sizeof(horizontal_scrollbar)
// Since we don't know the visibility/size of the horizontal scrollbar
// we scroll to scrollHeight that exceeds the value of the
// desired scrollTop but it seems to scroll to the bottom with all browsers
// without problems even when the horizontal scrollbar is visible.
var scrollLeft = (document.documentElement && document.documentElement.scrollLeft) || document.body.scrollLeft;
window.scrollTo(scrollLeft, scrollHeight);

Svar #5

Dette fungerer

window.onscroll = function() {

    // @var int totalPageHeight
    var totalPageHeight = document.body.scrollHeight; 

    // @var int scrollPoint
    var scrollPoint = window.scrollY + window.innerHeight;

    // check if we hit the bottom of the page
    if(scrollPoint >= totalPageHeight)
    {
        console.log("at the bottom");
    }
}

Hvis du ønsker å støtte eldre nettlesere (IE9), erstatt window.scrollY med window.pageYOffset

Relaterte artikler