web-dev-qa-db-fra.com

Comment puis-je utiliser JQuery pour vérifier si une div défile jusqu'en bas?

J'ai un div avec débordement: scroll.

Je veux savoir si le défilement est en cours. Comment, en utilisant JQuery?

Celui-ci ne fonctionne pas: Comment puis-je déterminer si un div est défilé vers le bas?

javascriptjquery
37
TIMEX

Voici la solution correcte (jsfiddle) . Un bref aperçu du code:

$(document).ready(function () {
    $('div').bind('scroll', chk_scroll);
});

function chk_scroll(e) {
    var elem = $(e.currentTarget);
    if (elem[0].scrollHeight - elem.scrollTop() == elem.outerHeight()) {
        console.log("bottom");
    }
}

Voir this pour plus d’informations.

68
samccone
function isScrolledToBottom(el) {
    var $el = $(el);
    return el.scrollHeight - $el.scrollTop() - $el.outerHeight() < 1;
}

Ceci est une variation de la réponse de @ samccone qui intègre le commentaire de @ HenrikChristensen concernant les mesures sous-pixel.

12
Chris Martin

Vous pouvez le faire en

(scrollHeight - scrollTop()) == outerHeight()

Appliquez la syntaxe jQuery requise, bien sûr ...

4
Nirmal

Comme cela fonctionne sans jQuery comme ça:

 var isBottom = node.scrollTop + node.offsetHeight === node.scrollHeight;

Je fais :

 var node = $('#mydiv')[0]; // gets the html element
 if(node) {
    var isBottom = node.scrollTop + node.offsetHeight === node.scrollHeight;
 }
1
nha

Depuis 2012 Firefox contient la propriété scrollTopMax . Si scrollTop === scrollTopMax vous êtes au bas de l'élément.

1
Jan Jongboom

Sans jquery, pour l'événement onScroll

var scrollDiv = event.srcElement.body
window.innerHeight + scrollDiv.scrollTop == scrollDiv.scrollHeight
1
Haven

Voici le code:

$("#div_Id").scroll(function (e) {
    e.preventDefault();
    var elem = $(this);            
    if (elem.scrollTop() > 0 && 
            (elem[0].scrollHeight - elem.scrollTop() == elem.outerHeight())) {
        alert("At the bottom");
    }
});
0
user3548525

Pour moi, $el.outerHeight() donne la mauvaise valeur (en raison de la largeur de la bordure), alors que $el.innerHeight() donne la bonne valeur, alors je

function isAtBottom($el){

    return ($el[0].scrollHeight - $el.scrollTop()) == $el.innerHeight();
}
0
isapir