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
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

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
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
source

8

Pure JS

window.innerHeight
window.scrollY

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

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

— Kamil Kiełczewski
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.
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
source