$ (ventana) .scrollTop () vs. $ (documento) .scrollTop ()

184

Cuál es la diferencia entre:

$(window).scrollTop()

y

$(document).scrollTop()

Gracias.

— frenchie
fuente

2

'html' o 'body' para setter (depende del navegador) ... 'window' para getter ... cf Fiddle: jsfiddle.net/molokoloco/uCrLa

— molokoloco

149

Ambos van a tener el mismo efecto .

Sin embargo, como se señaló en los comentarios: $(window).scrollTop()es compatible con más navegadores web que $('html').scrollTop().

— Bodman
fuente

3

devuelve 0 en IE8 (aunque mi página está en modo caprichos, lo que puede jugar un factor)

— Greg Ogle

38

$ ('html'). scrollTop () no es un navegador cruzado (como setter no funciona al menos en Chrome). La forma más cruzada de hacerlo por ahora es: $ (window) .scrollTop () como getter, $ ('html, body'). ScrollTop (offset) como setter.

— Georgii Ivankin

66

De acuerdo con esta referencia , sin argumentos scrollTopno se desplaza a ningún lado, solo devuelve la ubicación de desplazamiento actual.

— O Mapper el

3

@ d2burke scrollTop()es un getter y scrollTop(value)es un setter. scrollTop()sin argumentos no cambia la posición de desplazamiento.

1

@ M98 window.scrollTo (x, y)

— Bodman

36

Primero, necesitas entender la diferencia entre windowy document. El windowobjeto es un objeto del lado del cliente de nivel superior. No hay nada encima del windowobjeto. JavaScript es un lenguaje orientado a objetos. Comienza con un objeto y aplica métodos a sus propiedades o las propiedades de sus grupos de objetos. Por ejemplo, el documentobjeto es un objeto del windowobjeto. Para cambiar el documentcolor de fondo de 's, debe establecer la propiedad de document' s bgcolor.

window.document.bgcolor = "red"

Para responder a su pregunta, no hay diferencia en el resultado final entre windowy document scrollTop. Ambos darán la misma salida.

Consulte el ejemplo de trabajo en http://jsfiddle.net/7VRvj/6/

En el uso general document, principalmente para registrar eventos y utilizar windowpara hacer cosas como scroll, scrollTop, y resize.

— Hussein
fuente

No hay diferencia en el resultado final. Ambos darán la misma salida.

— Hussein

Aparentemente no, algunos navegadores no admiten el desplazamiento de la ventana ya que el objeto de la ventana puede no ser el objeto que se desborda.

— Bodman

11

Qué navegador no admite ventana, sea específico. Aquí hay un ejemplo de jsfiddle.net/7VRvj/4 . Verifíquelo en todos los navegadores y avíseme en qué navegador no funciona.

— Hussein

4

La forma cruzada del navegador de hacer esto es

var top = ($(window).scrollTop() || $("body").scrollTop());

— amachree tamunoemi
fuente

1

Nota: $("body").scrollTop()siempre devuelve 0 en Google Chrome.

— Jonathan Parent Lévesque

2

$("body").scrollTop()está en desuso, ya no funciona en Chrome o FF . Volverá 0

— Jorge Lazo

0

Acabo de tener algunos de los problemas similares scrollTopdescritos aquí.

Al final, resolví esto en Firefox e IE usando el selector$('*').scrollTop(0);

No es perfecto si tiene elementos que no desea efectuar pero evita la disparidad de documento, cuerpo, HTML y ventana. Si ayuda ...

— Tapiochre
fuente

20

Nunca debe usar * de esta manera (de hecho, evite * por completo). En lugar de apuntar a un elemento, estás afectando a todo el DOM. Enorme golpe de rendimiento. Los selectores deben ser lo más precisos posible.

— Vlad

2

Yo personalmente siempre he usado $("html,body").scrollTop(val), nunca tuve ningún problema

— Roi