Wie bestimme ich die Höhe und die Bildlaufposition des Fensters in jQuery?

179

Ich muss die Höhe des Fensters und den Bildlaufversatz in jQuery erfassen, aber ich hatte kein Glück, dies in den jQuery-Dokumenten oder in Google zu finden.

Ich bin zu 90% sicher, dass es eine Möglichkeit gibt, für ein Element (vermutlich einschließlich des Fensters) auf height und scrollTop zuzugreifen, aber ich kann die spezifische Referenz einfach nicht finden.

javascript jquery Ein Wachsmalstift
quelle
2
Wie wäre es ohne jQuery?
Costa
@Costa Das wurde wahrscheinlich an anderer Stelle auf StackOverflow gestellt, und wenn nicht, verdient es, seine eigene Frage zu sein.
Ein Wachsmalstift

Antworten:

296

Aus jQuery Docs:

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

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

Pim Jäger
quelle
1
Zahlen, die ich gerade in den Dokumenten verpasst habe; suchte sie, aber ihre Organisation macht ehrlich gesagt keinen Sinn für mich (ich denke, ich denke immer noch in Mootools). Vielen Dank!
Ein Wachsmalstift
Dies funktioniert in keinem Browser für jQuery 1.3.2, obwohl es angeblich in einer früheren Version hinzugefügt wurde. Entweder das oder ich habe etwas falsch mit meinem Code hier
Philluminati
11
$ (Fenster) .height () gibt das Ansichtsfenster für die Höhe und nicht die Bildlaufhöhe an. $ (document) .height () gibt die tatsächliche Bildlaufhöhe an, wie Aidamina vorgeschlagen hat.
Jonathan
Ich bin oft erstaunt darüber, wie viele Upvotes einfache Dinge wie diese anziehen, aber da ich diese Woche bereits zweimal nachgeschlagen habe, habe ich eine weitere +1
Neil
41

von http://api.jquery.com/height/ (Hinweis: Der Unterschied zwischen der Verwendung des Fensters und des Dokumentobjekts)

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

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

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

Pure JS

window.innerHeight
window.scrollY

ist mehr als 10x schneller als jquery (und Code hat eine ähnliche Größe):

Geben Sie hier die Bildbeschreibung ein

Hier können Sie Tests auf Ihrem Computer durchführen: https://jsperf.com/window-height-width

Kamil Kiełczewski
quelle
window.scrollY
Holen Sie
6 
$(window).height()

$(window).width()

Es gibt auch ein Plugin für jquery, um die Position und die Offsets der Elemente zu bestimmen

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

scrolling offset = offsetHeight-Eigenschaft eines Elements

Joey V.
quelle
1
Danke, Joseph. Es ist nicht genau das, wonach ich gesucht habe, da ich versucht habe, die Verwendung eines anderen Plugins zu vermeiden, aber Sie haben mich dazu gebracht, in die richtige Richtung zu suchen. Am Ende stellte sich heraus, dass ich wirklich '$ (window) .scrollTop ()' brauchte, um herauszufinden, wie viel von der Seite über das Ansichtsfenster gescrollt wurde, um die Elemente entsprechend anzupassen.
DA.
0

Wenn Sie zu einem Punkt eines Elements scrollen müssen. Sie können die Jquery-Funktion verwenden, um nach oben / unten zu scrollen.

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