$ (window) .scrollTop () contre $ (document) .scrollTop ()

Réponses:

149

Ils vont tous les deux avoir le même effet .

Cependant, comme indiqué dans les commentaires: $(window).scrollTop()est pris en charge par plus de navigateurs Web que $('html').scrollTop().

Bodman
la source
3
il renvoie 0 dans IE8 (bien que ma page soit en mode bizarreries, ce qui peut jouer un facteur)
Greg Ogle
38
$ ('html'). scrollTop () n'est pas multi-navigateur (en tant que setter, cela ne fonctionne pas du moins dans Chrome). Pour le moment, la manière la plus transversale de le faire est: $ (window) .scrollTop () en tant que getter, $ ('html, body'). ScrollTop (offset) en tant que setter.
Georgii Ivankin
6
Selon cette référence , sans arguments, scrollTopne défile nulle part, mais renvoie simplement l'emplacement de défilement actuel.
OR Mapper
3
@ d2burke scrollTop()est un getter et scrollTop(value)un setter. scrollTop()sans arguments ne modifie pas la position de défilement.
1
@ M98 window.scrollTo (x, y)
Bodman
36

Tout d'abord, vous devez comprendre la différence entre windowet document. L' windowobjet est un objet côté client de niveau supérieur. Il n'y a rien au-dessus de l' windowobjet. JavaScript est un langage orienté objet. Vous commencez avec un objet et appliquez des méthodes à ses propriétés ou aux propriétés de ses groupes d'objets. Par exemple, l' documentobjet est un objet de l' windowobjet. Pour changer la document« couleur d'arrière - plan, vous souhaitez définir le document» s bgcolorpropriété.

window.document.bgcolor = "red"

Pour répondre à votre question, il n'y a aucune différence dans le résultat final entre windowet document scrollTop. Les deux donneront le même résultat.

Vérifiez l'exemple de travail sur http://jsfiddle.net/7VRvj/6/

En usage général documentprincipalement pour enregistrer les événements et utiliser windowpour faire des choses comme scroll, scrollTopet resize.

Hussein
la source
Aucune différence dans le résultat final. Les deux donneront le même résultat.
Hussein
Apprentiement non, certains navigateurs ne prennent pas en charge le défilement de fenêtre car l'objet de la fenêtre peut ne pas être l'objet qui déborde.
Bodman
11
Quel navigateur ne prend pas en charge la fenêtre, soyez précis. Voici un exemple jsfiddle.net/7VRvj/4 . Vérifiez-le dans tous les navigateurs et indiquez-moi sur quel navigateur il ne fonctionne pas.
Hussein
4

Pour ce faire, utilisez plusieurs navigateurs 

var top = ($(window).scrollTop() || $("body").scrollTop());
amachree tamunoemi
la source
1
Remarque: $("body").scrollTop()renvoyez toujours 0 dans Google Chrome.
Jonathan Parent Lévesque
2
$("body").scrollTop()est obsolète, ne fonctionne plus sur Chrome ou FF . Il reviendra 0
Jorge Lazo
0

J'ai juste eu quelques-uns des problèmes similaires avec scrollTop décrits ici.

En fin de compte, j'ai contourné cela sur Firefox et IE en utilisant le sélecteur$('*').scrollTop(0);

Pas parfait si vous avez des éléments que vous ne voulez pas appliquer, mais cela contourne la disparité entre les documents, le corps, le HTML et la fenêtre. Si ça aide ...

Tapiochre
la source
20
Vous ne devriez jamais utiliser * de cette façon (en fait, éviter complètement *). Au lieu de cibler un élément, vous affectez l'ensemble du DOM. Énorme succès de performance. Les sélecteurs doivent être aussi précis que possible.
Vlad
2
Personnellement, j'ai toujours utilisé $("html,body").scrollTop(val)- jamais eu de problèmes
Roi