Как создать сайт

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

Здравствуйте! На прошлом уроке мы  с вами разбирались с  координатами элемента в окне. А на этом поговорим о координатах элемента непосредственно в документе. Тут следует отметить, что система координат относительно документа начинается в левом верхнем углу, а не в левом нижнем как мы знаем из школьного курса геометрии.

И соответственно координаты отвечают за позицию элемента по отношению к окну, а не к браузеру в целом.

По аналогии с CSS  координаты относительно окна браузера — это фиксированное позиционирование CSS, а относительно документа — абсолютное позиционирование.

Для удобства я буду называть  такие координаты PageX/PageY.

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

координаты элемента в документе

Сравнение систем координат

Если страница не прокручена, то  точки начала координат относительно окна (clientX,clientY) и  соотвественно документа (pageX,pageY) будут совпадать:
сравнеие систем координат

Давайте прокрутим страницу, таким образом чтобы элемент был на самом верху:

Посмотрите на рисунок ниже, на нём – та же страница, только немного  прокрученная.

  • Координата clientY поменялась. Она была 175, а стала 0,  потому что, элемент находится вверху окна.
  • Координата pageY не изменилась и осталась  такой же,  поскольку она  отсчитывается от левого-верхнего угла документа.


Итак,  сделаем вывод, что координаты pageX/pageY не изменяются при прокрутке, в отличие от  координат clientX/clientY.

Получение координат

Тут я вынужден вас огорчить, поскольку готовой функции для получения координат элемента относительно страницы  увы нет. Но  мы её можем легко написать.

Дело в том, что 2 системы координат  очень жёстко связаны: pageY = clientY + текущая вертикальная прокрутка.

Наша  с вами функция getCoord(el) будет брать результат  функции el.getBoundingClientRect() и складывать соответственно  текущую прокрутку документа.

Результат getCoord: объект с координатами {left: .., top: ..}

function getCoord(el) { 
  var box1 = el.getBoundingClientRect();

  return {
    top: box1.top + pageYOffset,
    left: box2.left + pageXOffset
  };

}

Координаты на экране screenX/screenY

Но есть ещё одна система координат, которая  может быть используется очень редко,  но я решил о ней упомянуть для полноты картины.

Читайте также  Объект Node. Как перемещаться по DOM

Речь идет о координатах  относительно экрана screenX/screenY отсчитываются они  от его левого-верхнего угла. Тут следует понимать весь экран монитора, а не окно браузера.

коррдинаты экрана мониторав

 

Такие координаты могут быть использованы , например, при работе с мобильными телефонами или для открытия нового окна  на середине экрана.

  • Размеры экрана сохранятся в глобальной переменной screen:
    // общая ширина/высота
    alert( screen.width + ' x ' + screen.height );
    
    // доступная ширина/высота (за вычетом таскбара и т.п.)
    alert( screen.availWidth + ' x ' + screen.availHeight );
    
    // есть и ряд других свойств screen (см. документацию)

Координаты левого-верхнего угла браузера на экране сохраняются в window.screenX, window.screenY:

alert( "Браузер находится на " + window.screenX + "," + window.screenY );
  • Они могут быть  даже и  меньше нуля, это происходит в случае  если окно частично вне экрана.

 

Итоги

У любого  элемента в браузере есть координаты:

  1. Относительно окна браузера window – elem.getBoundingClientRect().
  2. Относительно документа document – добавляем прокрутку.
  3. Относительно экрана монитора  screen – можно узнать координаты браузера, но не как  элемента.

Задачи

Область видимости для документа браузера

Напишите функцию getDocumentsScroll(), которая  будет возвращает объект с информацией о текущей прокрутке и области видимости.

Разместить заметку внутри элемента

Напишите функцию positionAt(anchor, position, elem), которая бы вставляла  элемент elem внутрь якоря anchor.

Если вы нашли ошибку, пожалуйста, выделите фрагмент текста и нажмите Ctrl+Enter.

Плюсануть
Поделиться
Понравилась запись? Подпишитесь на обновления по почте:

Об авторе

admin administrator

Оставить ответ

32 − 31 =

Сообщить об опечатке

Текст, который будет отправлен нашим редакторам: