Comment déterminer la hauteur et la position de défilement de la fenêtre dans jQuery?

179

J'ai besoin de saisir la hauteur de la fenêtre et le décalage de défilement dans jQuery, mais je n'ai pas eu de chance de trouver cela dans la documentation jQuery ou Google.

Je suis sûr à 90% qu'il existe un moyen d'accéder à la hauteur et à scrollTop pour un élément (y compris probablement la fenêtre), mais je ne trouve tout simplement pas la référence spécifique.

javascript jquery Un crayon
la source
2
Que diriez-vous sans jQuery?
Costa
@Costa Cela a probablement été demandé ailleurs sur StackOverflow, et sinon, cela mérite d'être sa propre question.
One Crayon

Réponses:

296

À partir de jQuery Docs:

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

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

Pim Jager
la source
1
Les chiffres que je viens de manquer dans la documentation; les a fouillé, mais leur organisation n'a franchement aucun sens pour moi (je pense toujours à Mootools, je suppose). Merci!
One Crayon
Cela ne fonctionne dans aucun navigateur pour jQuery 1.3.2 même s'il a été supposément ajouté dans une version antérieure. Soit ça, soit j'ai quelque chose qui ne va pas avec mon code ici
Philluminati
11
$ (window) .height () donne la hauteur de la fenêtre et non la hauteur de défilement. $ (document) .height () donne la hauteur réelle du défilement, comme l'a suggéré Aidamina.
Jonathan
Je suis souvent étonné de voir combien de votes positifs des choses simples comme celle-ci attirent, mais comme j'ai déjà regardé cela deux fois cette semaine, ayez un autre +1
Neil
41

depuis http://api.jquery.com/height/ (Remarque: la différence entre l'utilisation de la fenêtre et de l'objet document)

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

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

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

Pure JS

window.innerHeight
window.scrollY

est plus de 10 fois plus rapide que jquery (et le code a une taille similaire):

entrez la description de l'image ici

Ici, vous pouvez effectuer un test sur votre machine: https://jsperf.com/window-height-width

Kamil Kiełczewski
la source
window.scrollY, obtenir la hauteur du haut du défilement
xgqfrms
6 
$(window).height()

$(window).width()

Il existe également un plugin pour jquery pour déterminer l'emplacement et les décalages des éléments

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

scrolling offset = offsetHeight propriété d'un élément

Joey V.
la source
1
Merci, Joseph. Ce n'est pas exactement ce que je recherchais car j'essayais d'éviter d'utiliser un autre plugin, mais vous m'avez fait chercher dans la bonne direction. En fin de compte, il s'est avéré que ce dont j'avais vraiment besoin était '$ (window) .scrollTop ()' pour déterminer combien de la page a défilé au-delà de la fenêtre pour ajuster les éléments en conséquence.
DA.
0

Si vous avez besoin de faire défiler jusqu'à un point d'un élément. Vous pouvez utiliser la fonction Jquery pour le faire défiler vers le haut / bas.

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