Como determino a altura e a posição de rolagem da janela no jQuery?

179

Preciso agarrar a altura da janela e o deslocamento da rolagem no jQuery, mas não tive sorte em encontrar isso nos documentos do jQuery ou no Google.

Estou 90% certo de que existe uma maneira de acessar height e scrollTop para um elemento (provavelmente incluindo a janela), mas simplesmente não consigo encontrar a referência específica.

javascript jquery One Crayon
fonte
2
Que tal sem o jQuery?
Costa
@ Costa Isso provavelmente já foi feito em outro lugar no StackOverflow e, se não, merece ser sua própria pergunta.
1 Crayon

Respostas:

296

Do jQuery Docs:

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

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

Pim Jager
fonte
1
Figuras que acabei de faltar nos documentos; procurei por eles, mas a organização deles francamente não faz sentido para mim (ainda pensando no Mootools, suponho). Obrigado!
1 Crayon
Isso não funciona em nenhum navegador do jQuery 1.3.2, mesmo que supostamente tenha sido adicionado em uma versão anterior. Ou isso ou eu tenho algo de errado com meu código aqui
Philluminati
11
$ (window) .height () fornece a viewport de altura e não a altura de rolagem. $ (document) .height () fornece a altura real de rolagem, como Aidamina sugeriu.
11137 Jonathan
Muitas vezes me surpreso com quantas upvotes simples coisas como esta atrair, mas desde que eu olhei isso duas vezes esta semana já, ter outro +1
Neil
41

de http://api.jquery.com/height/ (Nota: a diferença entre o uso da janela e o objeto do 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
fonte
8

JS puro

window.innerHeight
window.scrollY

é 10 vezes mais rápido que o jquery (e o código tem tamanho semelhante):

insira a descrição da imagem aqui

Aqui você pode executar o teste em sua máquina: https://jsperf.com/window-height-width

Kamil Kiełczewski
fonte
window.scrollY, obtenha altura superior da rolagem
xgqfrms
6 
$(window).height()

$(window).width()

Há também um plugin para jquery para determinar a localização e deslocamentos do elemento

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

scrolling offset = offsetHeight propriedade de um elemento

Joey V.
fonte
1
Obrigado Joseph. Não é exatamente o que eu estava procurando, pois estava tentando evitar o uso de outro plug-in, mas você me fez procurar na direção certa. No final, o que eu realmente precisava era de '$ (window) .scrollTop ()' para descobrir quanto da página passou pela janela de exibição para ajustar os elementos de acordo.
DA.
0

Se você precisar rolar para o ponto de um elemento. Você pode usar a função Jquery para rolar para cima / baixo.

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