Як визначити 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.