Jak uzyskać pozycję przewijania dokumentu?

Question 1

Jak uzyskać wartość pozycji przewijania dokumentu?

Question 2

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

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

Question 3

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.

Question 4

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.

Question 5

document.getElementById("elementID").scrollHeight

$("elementID").scrollHeight

Question 6

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

var height = document.body.scrollHeight;

Question 7

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.

Question 8

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.

Question 9

Spróbuj tego:

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

Question 10

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

Answer 1

82

Jak uzyskać wartość pozycji przewijania dokumentu?

jquery scroll Ktoś
źródło

Answer 2

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

Answer 3

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ś

Answer 4

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ś

Answer 5

101

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

Wayne

Answer 6

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

Answer 7

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

Answer 8

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

Answer 9

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

Answer 10

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

Answer 11

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

Answer 12

2

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

Ally.

Answer 13

1

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

Zemljoradnik

Answer 14

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

Answer 15

12

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

Michael,

Answer 16

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

Answer 17

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

Answer 18

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

BrainSlugs83

Answer 19

2

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

Anmol Saraf

Answer 20

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

Answer 21

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

Answer 22

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

Answer 23

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

Zuul

Answer 24

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

Answer 25

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.

Answer 26

1

Spróbuj tego:

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

Dmitry Komin
źródło

Answer 27

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

Jak uzyskać pozycję przewijania dokumentu?

Odpowiedzi: