web-dev-qa-db-fra.com

$ (document) .scrollTop () renvoie toujours

J'essaie simplement de faire quelque chose une fois que la position de défilement de la page a atteint une certaine hauteur. Cependant, scrollTop() renvoie 0 ou null, peu importe la distance parcourue. C'est la fonction d'aide que j'utilise pour vérifier la valeur scrollTop(): 

$('body').click(function(){
    var scrollPost = $(document).scrollTop();
    alert(scrollPost);
});

J'ai essayé d'associer scrollTop() à $('body'), $('html') et bien sûr $(window), mais rien ne change. 

Des idées?

javascriptjqueryscrolltop
60
jetlej

Pour une raison quelconque, la suppression de "height: 100%" de mes balises html et body a résolu ce problème.

J'espère que ça aidera quelqu'un d'autre!

104
jetlej

J'ai eu le même problème avec scroll = 0 dans:

document.body.scrollTop

La prochaine utilisation

document.scrollingElement.scrollTop

Modifier le 01.06.2018

Si vous utilisez event, alors vous avez un objet qui a un élément document dans target ou srcElement.  Example Voici un tableau montrant les opérations de défilement sous différents navigateurs.

 enter image description here

Comme vous pouvez le voir, Firefox et IE n'ont pas srcElement et IE 11 ne supporte pas scrollingElement.

36
Verri

Ma solution, après avoir essayé certaines des solutions ci-dessus et qui ne nécessite aucune modification de CSS:

var scroll_top = Math.max( $("html").scrollTop(), $("body").scrollTop() )

Cela fonctionne dans les versions à jour de Chrome, Firefox, IE et Edge.

6
Steve Lockwood

J'ai juste un complément pour ceux qui pourraient faire la même erreur que moi. Mon code était comme suit:

var p = $('html,body');
$( ".info" ).text( "scrollTop:" + p.scrollTop() );

Ce code fonctionnera sur tous les navigateurs sauf les navigateurs Webkits tels que chrome et safari car la balise <html> a toujours une valeur scrollTop égale à zéro ou nulle.

Les autres navigateurs l'ignorent, contrairement aux navigateurs Webkit. 

La solution la plus simple consiste simplement à supprimer la balise html de votre code et voilà: 

var p = $('body');
$( ".info" ).text( "scrollTop:" + p.scrollTop() );
5
Kamba-Bilola Ted

La suppression de height: 100%; des balises html et body peut résoudre le problème.

La raison:

La raison en est que vous avez peut-être défini 100% comme valeur de la propriété height d'éléments html et body. Si vous définissez la propriété height de html et corps à 100%, leur hauteur est égale à celle du document.

Voir ceci: https://www.dawoodnajam.tech/blog/2017/11/17/jquery-scrolltop-returns-0/

3
Dawood Najam

avait le même problème . scrollTop () fonctionne avec des blocs qui ne sont ni le document ni le corps . Pour que cette méthode fonctionne, vous devez ajouter un style de hauteur et de débordement pour votre bloc

#scrollParag {
    height: 500px;
    overflow-y: auto;
}

Et alors:

var scrolParag = document.getElementById('scrollParag');
 alert(scrolParag.scrollTop); // works!
2
Vasyl Gutnyk

À propos, il semble que vous devriez utiliser 

$("body").scrollTop()

au lieu de 

$(".some-class").scrollTop

C'est pourquoi je suis coincé.

0
fzyzcjy

Scroll Top renvoyait toujours 0 pour moi aussi. Je l'utilisais pour attirer l'attention sur l'élément spécifique d'une page. J'ai utilisé une autre approche pour le faire.

document.getElementById ("elementID"). scrollIntoView ();

Travaille bien pour moi sur mobile, tablette et ordinateur de bureau.

0
Hiral Patel