Javascript : Comment détecter si la fenêtre du navigateur défile vers le bas ?

Question

J'ai besoin de détecter si un utilisateur défile vers le bas d'une page. S'ils sont en bas de la page, lorsque j'ajoute un nouveau contenu en bas, je les fais automatiquement défiler vers le nouveau bas. S'ils ne sont pas en bas, ils lisent le contenu précédent plus haut sur la page, donc je ne veux pas les faire défiler automatiquement car ils veulent rester où ils sont.

Comment puis-je détecter si un utilisateur a défilé vers le bas de la page ou s'il a défilé plus haut sur la page ?

Answer 1

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

Voir la démo

Answer 2

La réponse acceptée n'a pas fonctionné pour moi. Cela a fait :

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

Si vous cherchez à prendre en charge des navigateurs plus anciens (IE9), utilisez l'alias window.pageYOffset qui offre une prise en charge légèrement meilleure.

Answer 3

Je cherchais une réponse mais je n'ai pas trouvé de réponse exacte. Voici une solution javascript pure qui fonctionne avec les derniers Firefox, IE et Chrome au moment de cette réponse :

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

Answer 4

Cela marche

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

Si vous souhaitez prendre en charge les anciens navigateurs (IE9), remplacez window.scrollY par window.pageYOffset