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

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

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

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 равно 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 - верхней.

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

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

• Координаты могут быть дробными – это нормально, так как они возвращаются из внутренних структур браузера.
• Координаты могут быть и отрицательными, например если прокрутить страницу так, что верх элемента будет выходить за верхнуюю границу окна, то его top-координата будет меньше нуля.
• Некоторые современные браузеры также добавляют к результату getBoundingClientRect свойства для ширины и высоты: width/height, но их можно получить и простым вычитанием: height = bottom - top, width = right - left.

Примеры

<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

Синтаксис

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() можно передать объект с опциями скролла, где:

• behavior отвечает за анимацию прокрутки. Принимает smooth, чтобы было плавно, по умолчанию резкое auto;
• block за вертикальное выравнивание. Принимает start, center, end и nearest;
• inline за горизонтальное выравнивание. Принимает то же, что и block

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

this.scrollIntoView({behavior: "smooth", block: "center", inline: "start"})

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

this.scrollIntoView(false)

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);

Примеры