Подсказки на компьютерную тематику

Можно подсмотреть, если забыли…

Как определить координаты элементов и прокрутка на 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 можно использовать функцию:
function getsize(element){
var t=document.querySelector(element).getBoundingClientRect().top;
var b=document.querySelector(element).getBoundingClientRect().bottom;
var h=b-t;
var r=document.querySelector(element).getBoundingClientRect().right;
var l=document.querySelector(element).getBoundingClientRect().left;
var w=r-l;
alert('Высота элемента='+h+' Ширина элемента='+w);
}

Задать координаты для прокрутки через 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>";
*/

Как определить координаты элементов и прокрутка на 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 можно использовать функцию:
function getsize(element){
var t=document.querySelector(element).getBoundingClientRect().top;
var b=document.querySelector(element).getBoundingClientRect().bottom;
var h=b-t;
var r=document.querySelector(element).getBoundingClientRect().right;
var l=document.querySelector(element).getBoundingClientRect().left;
var w=r-l;
alert('Высота элемента='+h+' Ширина элемента='+w);
}

Задать координаты для прокрутки через 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>";
*/