Как определить координаты элементов и прокрутка на JS

Как узнать координаты элемента через JS

В javascript координаты получаются методом отсчета от левой и верхней границ браузера.
Например, функция getBoundingClientRect() покажет значения координат любой из четырех сторон блока, но только значения left и right будут отсчитываться не слева или справа для каждого значения, а только слева, например значение left будет равно 10px слева, а значение right будет отсчитываться тоже слева и может быть равно 20px.
То же касается и определения координат top или bottom, которые будут показывать расстояние от верхней границы.
Если элемент выходит за пределы экрана, он может иметь отрицательные значения.

Использование:
• alert('Координаты h1 слева='+document.getElementsByTagName('h1')[0].getBoundingClientRect().left);
• alert('Координаты h1 справа='+document.getElementsByTagName('h1')[0].getBoundingClientRect().right);
• alert('Координаты h1 сверху='+document.getElementsByTagName('h1')[0].getBoundingClientRect().top);
• alert('Координаты h1 снизу='+document.getElementsByTagName('h1')[0].getBoundingClientRect().bottom);

Получение размера элемента по его координатам

Задать координаты для прокрутки через javascript

Необходимые функции для получения координат и размера страницы браузера:
• document.documentElement.clientHeight;– размер высоты экрана, не считая места для размещения элемента прокрутки экрана;
• document.documentElement.clientWidth;– размер ширины экрана, не считая места для размещения элемента прокрутки экрана;
• window.innerHeight;– полный размер высоты, вместе с частью для размещения прокрутки;
• window.innerWidth;– полный размер ширины, вместе с частью для размещения прокрутки;
• если браузер свернуть, эти размеры изменятся.

Высота или ширина всей страницы, вместе с невидимой частью

Полная кроссбраузерная высота всей страницы, в том числе невидимой части получится при использовании функции:
var scrollHeight = Math.max(
document.body.scrollHeight, document.documentElement.scrollHeight,
document.body.offsetHeight, document.documentElement.offsetHeight,
document.body.clientHeight, document.documentElement.clientHeight
);
alert( 'Кроссбраузерная высота с учетом прокрутки: ' + scrollHeight );
Ширина получится при замене в этой формуле части текста Height на Width.

Значение, на которое прокручена страница

Способ показывает кроссбраузерный вариант подсчета, на сколько пикселей от верха прокручена страница:
• alert('на сколько пикселей от верха прокручена страница-window.pageYOffset='+window.pageYOffset);
• alert('на сколько пикселей от верха прокручена страница-document.documentElement.scrollTop='+document.documentElement.scrollTop);

При одновременном использовании между ними поставить знак ||:
window.pageYOffset||document.documentElement.scrollTop

Прокрутка с javascript

Установка положения бегунка скроллинга по вертикали или горизонтали:
• window.scrollTo(pageX,pageY); //расположение прокрутки по координатам X и Y;
• window.scrollBy(x,y); //прокрутка страницы относительно текущего местонахождения скролла.

Например:
• window.scrollTo(0,33); // прокрутка однократно установится на расстоянии 33 px сверху по оси Y;
• window.scrollBy(0,-10); // значение прокрутки каждый раз при срабатывании функции будет уменьшаться на 10 px по оси Y;

Получение координат мыши на javascript

Стандартная функция для получения координат мыши в браузере:
document.onmousemove=function mouseCoords(e) {
// Для браузера IE
if (document.all) {
x = event.x + document.body.scrollLeft;
y = event.y + document.body.scrollTop;
// Для остальных браузеров
} else {
x = e.pageX; // Координата X курсора
y = e.pageY; // Координата Y курсора
}
document.getElementById("xy").innerHTML = "X : " + x + ", Y : " + y;
}
/*
echo "<span id='xy'></span>";
*/