Jak określić wysokość i pozycję przewijania okna w jQuery?

179

Muszę chwycić wysokość okna i przesunięcie przewijania w jQuery, ale nie miałem szczęścia znaleźć tego w dokumentach jQuery lub Google.

Jestem w 90% pewien, że istnieje sposób na uzyskanie dostępu do wysokości i scrollTop dla elementu (przypuszczalnie łącznie z oknem), ale po prostu nie mogę znaleźć konkretnego odniesienia.

javascript jquery Jedna kredka
źródło
2
A może bez jQuery?
Costa
@Costa To prawdopodobnie zostało zadane gdzie indziej na StackOverflow, a jeśli nie, to zasługuje na własne pytanie.
Jedna kredka

Odpowiedzi:

296

Z jQuery Docs:

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

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

Pim Jager
źródło
1
Liczby, których właśnie przegapiłem w dokumentach; przeszukałem ich, ale ich organizacja szczerze mówiąc nie ma dla mnie sensu (chyba nadal myślę w Mootools). Dzięki!
One Crayon
To nie działa w żadnej przeglądarce dla jQuery 1.3.2, chociaż podobno zostało dodane we wcześniejszej wersji. Albo to, albo mam coś nie tak z moim kodem tutaj
Philluminati,
11
$ (window) .height () podaje rzutnię wysokości, a nie wysokość przewijania. $ (document) .height () podaje rzeczywistą wysokość zwoju, jak sugerowała Aidamina.
Jonathan
Często jestem zdumiony, jak wiele pozytywnych opinii takich jak ta przyciąga, ale ponieważ już dwa razy w tym tygodniu szukałem tego, mam kolejne +1
Neil
41

ze strony http://api.jquery.com/height/ (Uwaga: Różnica między użyciem okna i obiektu dokumentu)

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

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

$(window).scrollTop() // return the number of pixels scrolled vertically
Aidamina
źródło
8

Pure JS

window.innerHeight
window.scrollY

jest ponad 10 razy szybszy niż jquery (a kod ma podobny rozmiar):

wprowadź opis zdjęcia tutaj

Tutaj możesz wykonać test na swoim komputerze: https://jsperf.com/window-height-width

Kamil Kiełczewski
źródło
window.scrollY, pobierz przewiń górną wysokość
xgqfrms
6 
$(window).height()

$(window).width()

Dostępna jest również wtyczka do jquery do określania położenia elementu i przesunięć

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

przewijanie offset = właściwość offsetHeight elementu

Joey V.
źródło
1
Dzięki, Joseph. To nie jest dokładnie to, czego szukałem, ponieważ starałem się uniknąć używania innej wtyczki, ale sprawiłeś, że szukałem we właściwym kierunku. W końcu okazuje się, że tak naprawdę potrzebowałem „$ (okno) .scrollTop ()”, aby dowiedzieć się, ile strony przewinęło się poza okienkiem ekranu, aby odpowiednio dopasować elementy.
DA.
0

Jeśli potrzebujesz przewinąć do punktu elementu. Możesz użyć funkcji Jquery do przewijania w górę / w dół.

$('html, body').animate({
                scrollTop: $("#div1").offset().top
            }, 'slow');
dush88c
źródło