Jak uzyskać pozycję przewijania dokumentu?

82

Jak uzyskać wartość pozycji przewijania dokumentu?

jquery scroll

— Ktoś
źródło

46

$(document).height() //returns window height

$(document).scrollTop() //returns scroll position from top of document

— Bob Gregor
źródło

Myślałem w ten sam sposób, ale dlaczego console.log ($ (this) .scrollTop ()) = 1187 console.log ($ (this) .height ()) = 1762 tak bardzo się różni? Dla 575px, jeśli przewinąłem do dołu strony. Gdzie podziały się te 575px? Pasek przewijania nie może mieć 576 pikseli :)

— Ktoś

3

Baaah, znowu moja wina. Patrzyłem na pasek przewijania z otwartym oknem firebuga. Oczywiście teraz może to być 576px. :) Dzięki chyba temat jest zamknięty.

— Ktoś

101

-1 - To bardzo miłe, ale nie odpowiada na pytanie, o które chodziło scrollHeight.

— Wayne

8

Prawidłowo, to jest pytanie jQuery. Ale ani $ (document) .height () ani $ (document) .scrollTop () nie podaje żądanych informacji. Żądanie dotyczyło scrollHeight. Wartość scrollHeight jest całkowitą wysokością dostępną dla elementu (jeśli jest przewijalny, ta wartość może być większa niż jego wysokość). scrollTop zwraca, jak daleko od góry znajdowałby się element. Żadne z nich nie odpowiada, jaka jest całkowita dostępna wysokość. Zobacz help.dottoro.com/ljbixkkn.php, aby dowiedzieć się więcej o scrollHeight

— teynon

4

Jest to oznaczane jako odpowiedź, ponieważ odpowiada na zamierzone pytanie pytającego, dotyczące wysokości, z jaką dokument jest obecnie przewijany ... ergo "scrollHeight". To zbieg okoliczności, że ta nazwa jest używana w innym kontekście.

— Chase Sandmann

177

Oto jak uzyskać scrollHeightelement uzyskany za pomocą selektora jQuery:

$(selector)[0].scrollHeight

Jeśli selectorjest to identyfikator elementu (np. elemId), Gwarantuje się, że indeksowany przez 0 element tablicy będzie elementem, który chcesz wybrać i scrollHeightbędzie poprawny.

— Demwis
źródło

12

Uważaj, zgodnie z bazą wiedzy Mozilli, nie jest obsługiwana od wersji IE starszych niż 8.0 developer.mozilla.org/en/DOM/element.scrollHeight

— yodabar

2

Uzgodniono z @Tomas, użyj abstrakcji jQuery, aby lepiej radzić sobie z dziwactwami w różnych przeglądarkach. Dla przykładu powyżej może zostać zmieniony na $ (selektor) .offset () top.

— Bob Gregor

3

No $ (document) .offset () zwraca wartość null, a .offset () nie ma nic wspólnego z pozycją pasków przewijania przeglądarki (.offset () zwraca współrzędne elementów względem dokumentu). Zgadzam się, że powinniśmy używać jQuery, gdy jest to możliwe, ale najwyraźniej, ponieważ nie ma obsługi różnych przeglądarek, jQuery nie zapewnia dla niego abstrakcji.

— BrainSlugs83

2

Możesz także zrobić $ (selector) .get (0) .scrollHeight

— Ally.

1

@Dmitri Zaitsev .scrollHeight jest właściwością węzła DOM, a nie właściwością jQuery.

— Zemljoradnik

45

Jeśli używasz Jquery 1.6 lub nowszego, użyj właściwości, aby uzyskać dostęp do wartości.

$(document).prop('scrollHeight')

Poprzednie wersje pobierały wartość z attr, ale nie publikowały wersji 1.6.

— Ankit
źródło

12

W przypadku jQuery 1.7.1 zwraca to „undefined”, podobnie jak $ (document) .attr („scrollHeight”).

— Michael,

5

Dzieje się tak, ponieważ brakuje elementu body. Musi to być $ (document.body) .prop ('scrollHeight') - w tym momencie równie dobrze możesz po prostu użyć document.body.scrollHeight;

— goddogsrunning

6

document.getElementById("elementID").scrollHeight

$("elementID").scrollHeight

— Sachin R.
źródło

więc jaki jest identyfikator elementu twojego obiektu dokumentu? ... może miałeś na myśli „document.body.scrollHeight”?

— BrainSlugs83

2

$ ('# gallery'). scrollHeight daje mi undefined // # gallery to id mojego przepełnienia: auto element, nie działa

— Anmol Saraf

6

Używa elementów HTML DOM, ale nie selektora jQuery. Może być używany jako:

var height = document.body.scrollHeight;

— wodny
źródło

3

Coś takiego powinno rozwiązać Twój problem:

$.getDocHeight = function(){
     var D = document;
     return Math.max(Math.max(D.body.scrollHeight,    D.documentElement.scrollHeight), Math.max(D.body.offsetHeight, D.documentElement.offsetHeight), Math.max(D.body.clientHeight, D.documentElement.clientHeight));
};

alert( $.getDocHeight() );

Ps: Wywołaj tę funkcję za każdym razem, gdy jej potrzebujesz, alert służy do celów testowych.

— Zuul
źródło

Z jakiegoś powodu ta funkcja nie działa poprawnie dla mnie; używając go wewnątrz elementu iframe. Rzeczywista wysokość <html> to 256px, ta funkcja daje mi 337px i nie mam pojęcia, skąd pochodzi. PS Używam Chrome 18.

— jurchiks

@jurchiks: Czy masz link do miejsca, w którym znajduje się ta ramka iframe, abym mógł się przyjrzeć?

— Zuul

blade.dateks.lv/salidzinat?ids=58664,43586 . Kliknij dowolny znak zapytania. Udało mi się naprawić większość z nich, ale dwa z nich (a jest ich więcej w zależności od porównywanych elementów) nadal mają na dole jakiś dziwny, tajemniczy margines ~ 20 pikseli. Znika jednak, gdy zmieniam rozmiar okna, ponieważ zmieniłem wymiary wyskakującego okienka przy zmianie rozmiaru okna.

— jurchiks Kwietnia

3

Aby uzyskać rzeczywistą przewijalną wysokość obszarów przewijanych przez pasek przewijania okna, użyłem $('body').prop('scrollHeight') . Wydaje się, że jest to najprostsze działające rozwiązanie, ale nie sprawdzałem szczegółowo pod kątem kompatybilności. Emanuele Del Grande zwraca uwagę na inne rozwiązanie, które prawdopodobnie nie zadziała dla IE poniżej 8.

Większość innych rozwiązań działa dobrze w przypadku elementów przewijanych, ale działa to dla całego okna. Warto zauważyć, że miałem ten sam problem z rozwiązaniem Ankit, co Michael, a mianowicie $(document).prop('scrollHeight')powrót undefined.

— acjay
źródło

1

Spróbuj tego:

var scrollHeight = $(scrollable)[0] == document ? document.body.scrollHeight : $(scrollable)[0].scrollHeight;

— Dmitry Komin
źródło

0

Możesz spróbować tego na przykład, ten kod umieści pasek przewijania na dole dla wszystkich tagów DIV

Pamiętaj: jQuery może zaakceptować funkcję zamiast wartości jako argument. „this” jest obiektem traktowanym przez jQuery, funkcja zwraca właściwość scrollHeight aktualnego DIV „this” i robi to dla wszystkich DIV w dokumencie.

$("div").scrollTop(function(){return this.scrollHeight})

— Steve
źródło