Размеры и прокрутка

Со свойствами элемента на странице можно ознакомиться на примере.

Всe возвращаемые и изменяемые значения указываются в пикселях (px).

clientHeightСодержит высоту элемента внутри границ.
clientLeftСодержит ширину левой границы.
clientTopСодержит ширину верхней границы.
clientWidthСодержит ширину элемента внутри границ.
elementFromPoint()Возвращает элемент, который находится на указанных координатах относительно окна.
getBoundingClientRect()Возвращает объект координат элемента.
offsetHeightСодержит полную высоту элемента.
offsetLeftСодержит левое смещение элемента относительно offsetParent.
offsetParentСодержит первый родительский элемент у которого CSS свойство position не равно static, либо body если его нет.
offsetTopСодержит смещение элемента сверху относительно offsetParent.
offsetWidthСодержит полную ширину элемента.
pageXOffsetГоризонтальная прокрутка страницы.
pageYOffsetВертикальная прокрутка страницы.
scrollBy()Позволяет прокрутить страницу по горизонтали и вертикали относительно текущей прокрутки.
scrollHeightСодержит высоту элемента с учетом вертикальной прокрутки.
scrollIntoView()Позволяет прокрутить страницу так, что бы элемент оказался вверху либо внизу.
scrollLeftСодержит ширину прокрученной части элемента слева.
scrollTo()Позволяет прокрутить страницу по горизонтали и (или) вертикали в указанное место.
scrollTopСодержит высоту прокрученной части элемента сверху.
scrollWidthСодержит ширину элемента с учетом горизонтальной прокрутки.

clientHeight

Свойство clientHeight содержит высоту элемента внутри границ вместе с padding, но без border и полосы прокрутки).

Синтаксис

element.clientHeight

Комментарии

Если у элемента появляется прокрутка то высота содержимого уменьшается на высоту полосы прокрутки (около 16px - зависит от браузера, ОС, устройства).

Если элемент скрытый, то clientHeight равно 0.

Если есть полоса прокрутки, clientHeight возвращает именно ширину внутри неё, доступную для документа, а innerHeight – игнорируют её наличие.

Примеры

<div id="elem1" style="height: 90px; border: 10px solid; padding: 15px; width:300px;">
<b>elem1</b>
</div>
<script>
e = document.getElementById('elem1');
document.write (
  "<p>elem1.clientHeight =  padding-top + height + padding-bottom =" +
   parseInt(e.style.paddingTop)+'+'+ 
   parseInt(e.style.height)+'+'+
   parseInt(e.style.paddingBottom) + ' = ' +
   e.clientHeight + '<br>' + 
  "elem1.clientWidth =  padding-left + width + padding-right =" +
   parseInt(e.style.paddingLeft)+'+'+ 
   parseInt(e.style.width)+'+'+
   parseInt(e.style.paddingRight) + ' = ' +
   e.clientWidth + '</p>');
</script>
<div id="elem2" 
    style="height:90px; border:10px solid; padding:15px;width: 50px; overflow:auto;">
У этого элемента (elem2) есть прокрутка.
</div>
<script>
e = document.getElementById('elem2');
document.write (
  "<p>elem2.clientHeight =  padding-top + height + padding-bottom - scrollbar =" +
  e.clientHeight + '<br>' + 
 "elem2.clientWidth =  padding-left + width + padding-right - scrollbar =" +
  e.clientWidth + '</p>');

</script>

Размеры рабочей области браузера:

// с учетом полос прокрутки 
var w = window.innerWidth  || document.documentElement.clientWidth  || document.body.clientWidth;
var h = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
var t = w + ' x ' + h + '\n';


// без учета полос прокрутки 
w = document.documentElement.clientWidth  || document.body.clientWidth;
h = document.documentElement.clientHeight || document.body.clientHeight;
Alert (t+w + ' x ' + h);

clientLeft

Свойство clientLeft содержит ширину левой границы (значение border-left).

Синтаксис

element.clientLeft

Комментарии

Точнее clientLeft содержит значение отступа внутренней части элемента от внешней. В большинстве случаев clientLeft равно border-left, но если документ располагается справа налево, то в значение clientLeft может включатся и ширина полосы прокрутки слева.

Если элемент скрытый, то clientLeft равно 0.

Примеры

<div id="elem" style="border: 10px  solid #aacccc; padding: 20px;"></div>
<script>
var elem = document.getElementById('elem');
elem.innerHTML = "elem.clientLeft = " +elem.clientLeft + '<br>' + 
                 "elem.clientTop = " +elem.clientTop;
</script>

clientTop

Свойство clientTop содержит ширину верхней границы (значение border-top).

Синтаксис

element.clientTop

Комментарии

Если элемент скрытый, то clientTop равно 0.

Примеры

clientWidth

Свойство clientWidth содержит ширину элемента внутри границ вместе с padding, но без border и прокрутки).

Синтаксис

element.clientWidth

Комментарии

Если у элемента появляется прокрутка то ширина содержимого уменьшается на высоту прокрутки (около 16px - зависит от браузера, ОС, устройства).

Если элемент скрытый, то clientWidth равно 0.

Если есть полоса прокрутки, clientWidth возвращает именно высоту внутри неё, доступную для документа, а innerWidth – игнорируют её наличие.

Примеры

elementFromPoint()

Метод elementFromPoint возвращает элемент, который находится на указанных координатах (x,y) относительно окна.

Синтаксис

document.elementFromPoint(x, y);

Примеры

<div style="height:200px; width:500px; padding: 20px; margin:50px;"> 
  <p style="text-align:center">
    Элементу по центру экрана на 3 секунды установим красный фон:<br><br>
    <button onclick="myFunction()"> Попробуй elementFromPoint() </button>
  </p>
</div>

<script>
function myFunction() {
var x = document.documentElement.clientWidth / 2;
var y = document.documentElement.clientHeight / 2;

var elem = document.elementFromPoint(x, y);

elem.style.background = 'red';
setTimeout(function() { elem.style.background = ''; }, 3000); }
</script>

getBoundingClientRect()

Метод getBoundingClientRect возвращает объект координат элемента.

Синтаксис

element.getBoundingClientRect()

Описание, комментарии

Координаты рассчитываются относительного видимой части страницы без учета прокрутки (относительно окна). То есть как при position: fixed.

Иначе говоря, если страницу прокрутить, то элемент поднимется выше или опустится ниже – его координаты относительно окна изменятся.

В возвращаемом объекте содержатся свойства: left, top, right, bottom. Стоит отметить, что эти свойства не имеют ничего общего с CSS свойствами. В них содержатся расстояния до соответствующих сторон элемента. Для left/right - от левой границы видимой области страницы, а для top/bottom - верхней.

Например, кликните на кнопку, чтобы увидеть её координаты:

Если вы прокрутите эту страницу, то положение кнопки в окне изменится, и её координаты, соответственно, тоже.

Примеры

<p>При клике по кнопке разместим под ней новый элемент (с position:fixed) и удалим его через 3 секунды:</p>
<input type="button" value=" Нажмите на кнопку " id="button" onclick="fshow()">
<script>
var button = document.getElementById('button');

function fshow () {
 var newEl = getNewEl();
 document.body.appendChild(newEl);

 setTimeout(function() { document.body.removeChild(newEl); }, 3000);
  }
function getNewEl() {
 var c = "position:fixed; border: 1px solid #aa7777; padding: 5px;";
 var xy = button.getBoundingClientRect();
 var newEl = document.createElement('div');
 newEl.innerHTML = 'Новый элемент';
 newEl.style.cssText = c + 
   'left:' + xy.left + 'px;'
   'top:' + (xy.bottom + 1) + 'px;';
return newEl; }
</script>

offsetHeight

Свойство offsetHeight содержит полную высоту элемента (включает собственно высоту элемента, высоту границ, padding, scrollbar).

Синтаксис

element.offsetHeight

Комментарии

Если элемент скрытый, то offsetHeight равно 0.

Примеры

<div id="elem" style="height: 150px; width: 550px; border: 10px solid #aacccc; padding: 15px">
</div>
<script>
var e = document.getElementById('elem');
var s = e.style;
var t = "offsetHeight = border-top + padding-top + height + padding-bottom + border-bottom = " + 
        parseInt(s.borderTop) + ' + ' + parseInt(s.paddingTop) + ' + ' + 
        parseInt(s.height) + ' + ' + 
        parseInt(s.paddingBottom) + ' + ' + parseInt(s.borderBottom) + ' = ' + 
        e.offsetHeight + 
 "<br>offsetWidth = border-left+padding-left+width+padding-right+border-right = " + 
        parseInt(s.borderLeft) + '+' + parseInt(s.paddingLeft) + 
        '+' + parseInt(s.width) + '+' + 
        parseInt(s.paddingRight) + '+' + parseInt(s.borderRight) + ' = ' + 
        e.offsetWidth;  
e.innerHTML = t;
</script>

offsetLeft

Свойство offsetLeft содержит левое смещение элемента относительно offsetParent (относительно родительского элемента у которого css-свойство position не равно static).

Содержит расстояние от offsetParent до границы элемента (то есть без учета margin).

Синтаксис

element.offsetLeft

Примеры

Если у родительских элементов нет позиционирования то offsetLeft - левое смещение элемента относительно body:

<div style="border:5px solid #aaaaaa">
  <div id="elem" 
       style="position:absolute; left:100px; border:5px solid #aaaa33">
  </div>
</div>

<script>
var elem = document.getElementById('elem');
elem.innerHTML = "&nbsp; offsetLeft = " + elem.offsetLeft;
</script>

Но если есть родительский элемент со свойство position отличными от static:

<div style="position:relative; left:500px; border:5px solid #aaaaaa">
   <div id="elem" 
       style="position:absolute; left:100px; border:5px solid #aaaa33">
   </div>
</div>

<script>
elem = document.getElementById('elem');
elem.innerHTML = "&nbsp; offsetLeft = " + elem.offsetLeft;
</script>

В этом примере у элемента с id равным elem левое смещение относительно body - 600px, но относительно offsetParent - 100px;


Свойство offsetLeft (как и все остальные метрики) не учитывает отступы margin (так как это не часть элемента). Но в css отступы это часть элемента. Поэтому:

<div style="position:relative; left:500px; border:5px solid #aaaaaa">
  <div id="elem" 
       style="position:absolute; left:100px; margin:50px; border:5px solid #aaaa33">
  </div>
</div>

<script>
elem = document.getElementById('elem');
elem.innerHTML = "&nbsp; offsetLeft = " + elem.offsetLeft;
</script>

offsetParent

Свойство offsetParent содержит первый родительский элемент у которого CSS свойство position не равно static, либо body если его нет. То есть родителя относительно которого происходит позиционирование элемента.

Синтаксис

element.offsetParent

Примеры

<div>
   <p id="elem"> </p>
</div>

<div style="position: relative">
   <p id="elem1"> </p>
</div>

<script>
var elem = document.getElementById('elem');
elem.innerHTML = "elem.offsetParent = " + elem.offsetParent.tagName;
var elem = document.getElementById('elem1');
elem.innerHTML = "elem1.offsetParent = " + elem.offsetParent.tagName;
</script>

offsetTop

Свойство offsetTop содержит смещение элемента сверху относительно offsetParent (относительно родительского элемента у которого css-свойство position не равно static).

Содержит расстояние от offsetParent до границы элемента (то есть без учета margin).

Синтаксис

element.offsetTop

Примеры

Если у родительских элементов нет позиционирования то offsetTop - смещение элемента сверху относительно body:

<div style="border:5px solid #aaaaaa">
  <div id="elem" 
       style="position:absolute; top:50px; border:5px solid #aaaa33">
  </div>
</div>

<script>
var elem = document.getElementById('elem');
elem.innerHTML = "&nbsp; offsetTop = " + elem.offsetTop;
</script>

Но если есть родительский элемент со свойство position отличными от static:

<div style="position:relative; top:50px; border:5px solid #aaaaaa">
   <div id="elem" 
       style="position:absolute; top:50px; border:5px solid #aaaa33">
   </div>
</div>

<script>
elem = document.getElementById('elem');
elem.innerHTML = "&nbsp; offsetTop = " + elem.offsetTop;
</script>

В этом примере у элемента с id равным elem верхнее смещение относительно body - 100px, но относительно offsetParent - 50px;


Свойство offsetTop (как и все остальные метрики) не учитывает отступы margin (так как это не часть элемента). Но в css отступы это часть элемента. Поэтому:

<div style="position:relative; top:50px; border:5px solid #aaaaaa">
  <div id="elem" 
       style="position:absolute; top:50px; margin:30px; border:5px solid #aaaa33">
  </div>
</div>

<script>
elem = document.getElementById('elem');
elem.innerHTML = "&nbsp; offsetTop = " + elem.offsetTop;
</script>

offsetWidth

Свойство offsetWidth содержит полную ширину элемента (включает собственно ширину элемента, ширину границ, padding, scrollbar).

Синтаксис

element.offsetWidth

Комментарии

Если элемент скрытый, то offsetWidth равно 0.

Примеры

pageXOffset

Свойство pageXOffset - горизонтальная прокрутка страницы. Фактически это scrollLeft специально для страницы, но со scrollLeft для страницы могут возникать некоторые проблемы.

Свойство pageXOffset нельзя менять (в отличии от scrollLeft).

Синтаксис

window.pageXOffset

Совместимость с браузерами

Да9,0ДаДаДа

Примеры

Для IE8 и ранее, можно использовать "document.documentElement.scrollLeft"

// Кросс-браузерное решение
var X = window.pageXOffset || document.documentElement.scrollLeft;
var Y  = window.pageYOffset || document.documentElement.scrollTop;
Alert ("pageXOffset = " + X + "\npageYOffset = " + Y);

pageYOffset

Свойство pageYOffset - вертикальная прокрутка страницы. Фактически это scrollTop специально для страницы, но со scrollTop для страницы могут возникать некоторые проблемы.

Свойство pageYOffset нельзя менять (в отличии от scrollTop).

Синтаксис

window.pageYOffset

Совместимость с браузерами

Да9,0ДаДаДа

Примеры

Для IE8 и ранее, можно использовать "document.documentElement.scrollTop"

// Кросс-браузерное решение
var X = window.pageXOffset || document.documentElement.scrollLeft;
var Y  = window.pageYOffset || document.documentElement.scrollTop;
Alert ("pageXOffset = " + X + "\npageYOffset = " + Y);

scrollBy()

Функция scrollBy позволяет прокрутить страницу по горизонтали и вертикали относительно текущей прокрутки.

Синтаксис

window.scrollBy( x, y )

scrollBy( x, y )

Параметры

x
Количество пикселей, на которое будет прокручено содержимое окна по горизонтали. Положительные значения будут прокручиваться влево, а отрицательные значения будут прокручивать вправо
y
Количество пикселей, на которое будет прокручено содержимое окна по вертикали. Положительные значения будут прокручиваться вниз, в то время как отрицательные значения прокрутки вверх

Примеры

alert ('Прокрутить содержимое окна вверх');
scrollBy(0,-200);
alert ('Прокрутить содержимое окна вниз');
scrollBy(0,200);

scrollHeight

Свойство scrollHeight содержит высоту элемента с учетом вертикальной прокрутки.

Если у элемента нет вертикальной полосы прокрутки, то scrollHeight равно clientHeight.

Синтаксис

element.scrollHeight

Комментарии

Если элемент скрытый, то scrollHeight равно 0.

В некоторых браузерах определение высоты страницы (documentElement) с учетом вертикальной прокрутки этим свойством работает некорректно. Надёжно определить размер страницы с учетом прокрутки можно, взяв максимум из нескольких свойств:

var scrollHeight = Math.max(
  document.body.scrollHeight, document.documentElement.scrollHeight,
  document.body.offsetHeight, document.documentElement.offsetHeight,
  document.body.clientHeight, document.documentElement.clientHeight
);
Alert( 'Высота с учетом прокрутки: ' + scrollHeight );

Примеры

<div id="elem" 
     style="width: 300px; height: 70px; padding: 10px; overflow: auto;">
  <br>У этого элемента есть прокрутка.<br><br><br>
------------------------------------------------------------------------------<br>
</div>

<script>
var elem = document.getElementById('elem');
document.write(
 "<br>elem.scrollHeight = " + elem.scrollHeight +
 "<br>elem.scrollWidth = " + elem.scrollWidth);
</script>

scrollIntoView()

Метод scrollIntoView позволяет прокрутить страницу так, что бы элемент оказался вверху либо внизу.

В параметре получает логическое значение: если true - элемент кажется вверху, если false - внизу. По умолчанию true.

Синтаксис

element.scrollIntoView(true|false);

А ещё в scrollIntoView() можно передать объект с опциями скролла, где:

Кнопка ниже прокрутит страницу так, чтобы кнопка оказалась вверху:

А следующая кнопка прокрутит страницу так, чтобы кнопка оказалась внизу:

scrollLeft

Свойство scrollLeft содержит ширину прокрученной части элемента слева.

Это свойство можно менять - и элемент автоматически будет прокручиваться к новому значению свойства.

Синтаксис

element.scrollLeft [ = newValue ]

newValue - новая ширина прокрученной части элемента слева.

Комментарии

У обычного элемента текущую прокрутку можно получить в scrollLeft/scrollTop.

Что же со страницей?

Большинство браузеров корректно обработает запрос к document.documentElement.scrollLeft/Top, однако Safari/Chrome/Opera есть ошибки, из-за которых следует использовать document.body.

Чтобы вообще обойти проблему, можно использовать специальные свойства window.pageXOffset/pageYOffset

Примеры

<style>
div { width: 200px; overflow: auto; white-space: nowrap;
	border: 1px solid #000; padding:10px;}
</style>
При прокрутке элемента в начало текст будет делать красным, а<br />
при прокрутке элемента до конца текст будет делать синим
<div id="elem"> У этого элемента есть горизонтальная прокрутка. </div>

<script>
var elem = document.getElementById('elem');
   //Узнаем максимальную прокрутку элемента
   elem.scrollLeft = elem.scrollWidth; //прокручиваем до конца
   var max = elem.scrollLeft; //узнаем максимальную прокрутку
   elem.scrollLeft = max>>1;

elem.onscroll = function() {
  if (elem.scrollLeft === 0) { elem.style.color = 'red';}
  else if (elem.scrollLeft === max) { elem.style.color = '#0000ff'; }
  else { elem.style.color = 'black';}
 }
</script>

scrollTo()

Метод scrollTo позволяет прокрутить страницу по горизонтали и (или) вертикали в указанное место.

Синтаксис

window.scrollTo(x, y)
		
scrollTo(x, y)

Параметры

x
Координата вдоль оси X, до которой необходимо прокрутить документ в горизонтальном направлении.
y
оордината вдоль оси Y, до которой необходимо прокрутить документ в вертикальном направлении.

Примеры

scrollTo(0,100)

scrollTop

Свойство scrollTop содержит высоту прокрученной части элемента сверху. Также его можно менять.

Синтаксис

element.scrollTop [ = newValue ]

newValue - новая высота прокрученной части элемента сверху.

Комментарии

У обычного элемента текущую прокрутку можно получить в scrollLeft/scrollTop.

Что же со страницей?

Большинство браузеров корректно обработает запрос к document.documentElement.scrollLeft/Top, однако Safari/Chrome/Opera есть ошибки, из-за которых следует использовать document.body.

Чтобы вообще обойти проблему, можно использовать специальные свойства window.pageXOffset/pageYOffset

Примеры

<style>
#elem {height: 300px; overflow: auto;}
button {padding: 10px; cursor: pointer;}
</style>

<div id="elem">
  Начало страницы<br>
  <button onclick="f(1)"> Попробуй elem.scrollTop=elem.scrollHeight </button>
  <p style="margin-top:350px"> </p>
  <button onclick="f(0)"> Попробуй elem.scrollTop=0 </button>
  <br>Конец страницы
</div>

<script>
var elem = document.getElementById("elem");
function f (n) { 
  if (n===0) { elem.scrollTop=0; }
  else { elem.scrollTop=elem.scrollHeight; } }
</script>

scrollWidth

Свойство scrollWidth содержит ширину элемента с учетом горизонтальной прокрутки.

Если у элемента нет горизонтальной прокрутки, то scrollWidth равно clientWidth.

Синтаксис

element.scrollWidth

Комментарии

Если элемент скрытый, то scrollWidth равно 0.

В некоторых браузерах определение высоты страницы (documentElement) с учетом вертикальной прокрутки этим свойством работает некорректно. Надёжно определить размер страницы с учетом прокрутки можно, взяв максимум из нескольких свойств:

var scrollWidth = Math.max(
  document.body.scrollWidth, document.documentElement.scrollWidth,
  document.body.offsetWidth, document.documentElement.offsetWidth,
  document.body.clientWidth, document.documentElement.clientWidth
);
var scrollHeight = Math.max(
  document.body.scrollHeight, document.documentElement.scrollHeight,
  document.body.offsetHeight, document.documentElement.offsetHeight,
  document.body.clientHeight, document.documentElement.clientHeight
);
Alert( 'Ширина с учетом прокрутки:  ' + scrollWidth + '\n' +
       'Высота  с учетом прокрутки: ' + scrollHeight);

Примеры

Справочник JavaScript⌕≡
×
Справочник JavaScript