¿Cómo determino la altura y la posición de desplazamiento de la ventana en jQuery?

179

Necesito tomar la altura de la ventana y el desplazamiento de desplazamiento en jQuery, pero no he tenido suerte de encontrar esto en los documentos de jQuery o Google.

Estoy 90% seguro de que hay una manera de acceder a la altura y scrollTop para un elemento (presumiblemente incluyendo la ventana), pero simplemente no puedo encontrar la referencia específica.

javascript jquery Un crayón
fuente
2
¿Qué tal sin jQuery?
Costa
@Costa Eso probablemente se ha preguntado en otro lugar en StackOverflow, y si no, merece ser su propia pregunta.
Un crayón

Respuestas:

296

De jQuery Docs:

const height = $(window).height();
const scrollTop = $(window).scrollTop();

http://api.jquery.com/scrollTop/
http://api.jquery.com/height/

Pim Jager
fuente
1
Cifras que acabo de perder en los documentos; los busqué, pero su organización francamente no tiene sentido para mí (supongo que todavía pienso en Mootools). ¡Gracias!
Un Crayon
Esto no funciona en ningún navegador para jQuery 1.3.2 a pesar de que supuestamente se agregó en una versión anterior. O eso o tengo algo mal con mi código aquí
Philluminati
11
$ (ventana) .height () proporciona la vista de altura y no la altura de desplazamiento. $ (document) .height () proporciona la altura de desplazamiento real, como sugirió Aidamina.
Jonathan
A menudo me sorprende la cantidad de votos positivos que atraen cosas simples como esta, pero como ya he buscado esto dos veces esta semana, tengo otro +1
Neil
41

de http://api.jquery.com/height/ (Nota: La diferencia entre el uso de la ventana y el objeto del documento)

$(window).height();   // returns height of browser viewport
$(document).height(); // returns height of HTML document

de http://api.jquery.com/scrollTop/

$(window).scrollTop() // return the number of pixels scrolled vertically
Aidamina
fuente
8

JS puro

window.innerHeight
window.scrollY

es más de 10 veces más rápido que jquery (y el código tiene un tamaño similar):

ingrese la descripción de la imagen aquí

Aquí puede realizar pruebas en su máquina: https://jsperf.com/window-height-width

Kamil Kiełczewski
fuente
window.scrollY, obtenga la altura de desplazamiento superior
xgqfrms
6 
$(window).height()

$(window).width()

También hay un complemento para jquery para determinar la ubicación del elemento y las compensaciones

http://plugins.jquery.com/project/dimensions

desplazamiento desplazamiento = propiedad offsetHeight de un elemento

Joey V.
fuente
1
Gracias Joseph. No es exactamente lo que estaba buscando, ya que estaba tratando de evitar el uso de otro complemento, pero me hizo buscar en la dirección correcta. Al final, resulta que lo que realmente necesitaba era '$ (window) .scrollTop ()' para averiguar cuánto de la página se ha desplazado más allá de la ventana gráfica para ajustar los elementos en consecuencia.
DA.
0

Si necesita desplazarse a un punto de un elemento. Puede usar la función Jquery para desplazarse hacia arriba / abajo.

$('html, body').animate({
                scrollTop: $("#div1").offset().top
            }, 'slow');
dush88c
fuente