Jak określić scrollHeight?


96

Jak określić scrollHeight podziału, użyj CSS overflow: auto?

Próbowałem:

$('test').scrollHeight();
$('test').height(); but that just returns the size of the div not all the content

Ostatecznie próbuję utworzyć czat i zawsze mam pasek przewijania do bieżącej wiadomości na ekranie.

Więc pomyślałem coś takiego:

var test = $('test').height();
$('test').scrollTop(test);

Dziękuję Ci,

Brian


Co jest złego w używaniu scrollHeight ()?
Badr Hari,

2
@BadrHari: W scrollHeight()jQuery nie ma funkcji.
TJ Crowder,

to jest $ ('test'). get (0) .scrollHeight ();
JFouad,

Odpowiedzi:


91

scrollHeight jest zwykłą właściwością javascript, więc nie potrzebujesz jQuery.

var test = document.getElementById("foo").scrollHeight;

Dzięki! U mnie to zadziałało: var height = document.getElementById ("chatLog"). ScrollHeight - $ ('# chatLog'). Height (); $ ('# chatLog'). scrollTop (wysokość);
Brian

6
A co z obsługą przeglądarki? Obsługują ją wszystkie główne wersje przeglądarek? IE8 +?
SexyBeast

2
@Cupidvogel Połączona strona MDN mówi IE8 +
Dennis

320

Prawidłowe sposoby w jQuery to -

  • $('#test').prop('scrollHeight') LUB
  • $('#test')[0].scrollHeight LUB
  • $('#test').get(0).scrollHeight

Mam nadzieję, że to pomoże.


16
+1 dla $ ('# test') [0] .scrollHeight, biorąc pod uwagę, że pytający już używał jQuery.
Jackson,

12
To powinna być akceptowana odpowiedź, ponieważ odpowiada na pytanie.
zadzwoń

Powinna to być akceptowana odpowiedź. Zwróć uwagę, że propmetoda wymaga jquery w wersji 1.6 lub nowszej. +1 ode mnie
Vayne

2
Zwróć uwagę, że zwraca to tylko scrollHeight „pierwszego” znalezionego elementu, a jeśli jakiekolwiek elementy są obecnie „ukryte”, możesz otrzymać tutaj zero, nawet jeśli inni mają dodatnią wartość scrollHeight, FWIW :)
rogerdpack

@rogerdpack Dobra uwaga, proszę pana! Chociaż w tym przykładzie używa identyfikatora zamiast klasy jako selektora, więc powinno być w porządku, ale mimo to dobra uwaga.
dave4jr
Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.