Як визначити scrollHeight?


95

Як визначити scrollHeight підрозділу з використанням css overflow: auto?

Я пробував:

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

Зрештою, я намагаюся створити чат і завжди мати на екрані смугу прокрутки до поточного повідомлення.

Тож я думав приблизно наступне:

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

Дякую,

Брайан


Що поганого у використанні scrollHeight ()?
Бадр Харі,

2
@BadrHari: У scrollHeight()jQuery немає функції.
TJ Crowder,

це $ ('тест'). get (0) .scrollHeight ();
JFouad,

Відповіді:


90

scrollHeight є звичайною властивістю javascript, тому вам не потрібен jQuery.

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

Дякую! Це працювало у мене: var height = document.getElementById ("chatLog"). ScrollHeight - $ ('# chatLog'). Height (); $ ('# chatLog'). scrollTop (висота);
Brian

6
А як щодо підтримки браузера? Усі основні версії браузерів підтримують це? IE8 +?
SexyBeast

2
@Cupidvogel На пов'язаній сторінці MDN написано IE8 +
Денніс

316

Правильними способами в jQuery є -

  • $('#test').prop('scrollHeight') АБО
  • $('#test')[0].scrollHeight АБО
  • $('#test').get(0).scrollHeight

Сподіваюся, це допоможе.


16
+1 за $ ('# тест') [0] .scrollHeight, враховуючи, що автор вже використовував jQuery.
Jackson

12
Це повинна бути прийнята відповідь, оскільки вона відповідає на питання.
invot

Це повинна бути прийнята відповідь. Зверніть увагу, що propметод вимагає jquery версії 1.6 або новішої. +1 від мене
Vayne

2
Зверніть увагу, що повертається тільки scrollHeight "першого" знайденого елемента, і якщо будь-які елементи в даний момент "приховані", ви можете отримати тут нуль, навіть якщо інші мають позитивний scrollHeight, FWIW :)
rogerdpack

@rogerdpack Гарна думка, сер! Хоча в цьому прикладі він використовує ідентифікатор замість класу як селектор, тому він повинен бути в порядку, але тим не менш хороший момент.
dave4jr
Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.