xandeadx.ru Блог музицирующего веб-девелопера

Javascript → Как получить реальный размер элемента при overflow:scroll

Опубликовано в

Чтобы узнать реальные размеры элемента, у которого свойство overflow установлено в scroll или auto, и содержание которого больше размеров самого элемента, нужно воспользоваться свойством scrollWidth:

<div id="div" style="width:200px; overflow-x:auto; white-space:nowrap;">
  Длинный предлинный контент, который не влазит в 200px
</div>
 
<input type="button" onclick="alert(document.getElementById('div').scrollWidth);" value="Show scrollWidth">

Демо.

Подробнее про различные способы определения размера элемента можно прочитать в статье на javascript.ru — Измерения окна, документа и элементов.

Похожие записи

Комментарии RSS

Круть.
А для чего это понадобилось?

хотел сделать эффект разворачивающегося кода как на lullabot.com, и вот застопорился с определением размера. но всё оказалось достаточно просто :) запостил, чтобы не забыть в будущем.

Оставить комментарий

Содержимое этого поля является приватным и не будет отображаться публично. Если у вас есть аккаунт в Gravatar, привязанный к этому e-mail адресу, то он будет использован для отображения аватара.
  • Адреса страниц и электронной почты автоматически преобразуются в ссылки.
  • Доступные HTML теги: <a> <i> <b> <strong> <code> <ul> <ol> <li> <blockquote> <em> <s>
  • Строки и параграфы переносятся автоматически.
  • Подсветка кода осуществляется с помощью тегов: <code>, <css>, <html>, <ini>, <javascript>, <sql>, <php>. Поддерживаемые стили выделения кода: <foo>, [foo].

Подробнее о форматировании