Как получить позицию элемента страницы

Справочная информация: в последней итерации проекта списка продуктов необходимо добавить место для рекламы продукта распространения в нижней части списка продуктов, и в дополнение к получению спроса на показ продукта необходимо знать, что продукт появляется во вьюпорте пользователя вести статистику данных!

Основываясь на идее виртуального DOM, управляемого данными, наименее пропагандируемой является операция DOM в эпоху jquery! Однако в некоторых сложных страницах в настоящее время некоторые элементы DOM часто обрабатываются с помощью javascript для достижения некоторых динамических эффектов, наиболее распространенным является использование расчета положения и размера некоторых элементов, но нельзя игнорировать совместимость браузеров. часть,Чтобы написать код JavaScript с желаемым эффектом, нам нужно понять некоторые основы.

основная концепция

Размер страницы: вся площадь веб-страницы — это ее размер. Как правило, размер веб-страницы определяется содержимым и таблицами стилей CSS. Размер окна просмотра: относится к части области веб-страницы, видимой в окне браузера, также известной какviewport(видовое окно). Если содержимое веб-страницы может быть полностью отображено в браузере (и полосы прокрутки не появляются), то размер веб-страницы и размер окна браузера равны. Если не все может быть отображено, прокрутка окна браузера может отображать различные части веб-страницы.

Основные свойства элемента

В каждом элементе HTML есть следующие атрибуты.

offsetWidth	clientWidth	scrollWidth
offsetHeight	clientHeight	scrollHeight
offsetLeft	clientLeft	scrollLeft
offsetTop	clientTop	scrollTop

Чтобы понять эти свойства, нам нужно знать, что фактическое содержимое элемента HTML может быть больше, чем поле, выделенное для хранения содержимого, поэтому могут появляться полосы прокрутки, а область содержимого является окном просмотра. больше, чем окно просмотра, необходимо учитывать положение полосы прокрутки элемента.

• clientHeight и clientWidth используются для описания внутреннего размера элемента, который относится к содержимому элемента + размер внутреннего поля, за исключением границы (фактически включенной в IE), внешнего поля и части полосы прокрутки.
• offsetHeight и offsetWidth используются для описания внешнего размера элемента, который относится к содержимому элемента + отступу + границе, исключая внешнее поле и часть полосы прокрутки.
• clinetTop и clinetLeft возвращают расстояние по горизонтали и вертикали между краем заполнения и внешним краем границы, то есть ширину левой и верхней границы.
• offsetTop и offsetLeft представляют собой расстояние между левым верхним углом элемента (внешняя граница края) и левым верхним углом позиционированного родительского контейнера (объект offsetParent)
• Объект offsetParent ссылается на ближайший позиционированный (относительный, абсолютный) элемент-предок элемента,Рекурсивный возврат, если ни один элемент-предок не позиционирован, он вернет null

Получить размер области просмотра

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

Поэтому свойства clientHeight и clientWidth элемента документа представляют размер веб-страницы.

function getViewport() {
  if(!document) {
    return {}
  }
  if (document.compatMode === 'BackCompat') {
    return {
      width: document.body.clientWidth,
      height: document.body.clientHeight
    };
  }
  return {
    width: document.documentElement.clientWidth,
    height: document.documentElement.clientHeight
  };
}

Приведенная выше функция getViewport возвращает высоту и ширину окна браузера. При использовании есть три места, на которые следует обратить внимание:

• Эту функцию необходимо запускать после загрузки страницы, иначе объект документа не был сгенерирован и браузер сообщит об ошибке.
• В большинстве случаев Document.DocumentElement.ClientWidth возвращает правильное значение. Однако в специальном режиме IE6 Document.Body.ClientWidth возвращает правильное значение, поэтому в функцию добавляется присоединение к режиму документа.
• И clientWidth, и clientHeight являются свойствами, доступными только для чтения, и им нельзя присвоить значение.

Другой способ получить размер области просмотра

Каждый элемент на веб-странице также имеет свойства srcollHeight и scrollWidth, которые относятся к визуальной области элемента, включая прокрутку. Затем свойства scrollHeight и scrollWidth объекта документа представляют собой размер веб-страницы, что означает всю длину и ширину прокрутки полосы прокрутки.

подражатьgetViewportфункция, которую можно записатьgetPagearea()функция.

function getPagearea() {
 if (document.compatMode == 'BackCompat') {
  return {
     width: Math.max(document.body.scrollWidth, document.body.clientWidth),
     height: Math.max(document.body.scrollHeight, document.body.clientHeight)
    };
 }
 return {
    width: Math.max(document.documentElement.scrollWidth, document.documentElement.clientWidth),
   height: Math.max(document.documentElement.scrollHeight, document.documentElement.clientHeight)
  };
}

Координаты относительно документа и области просмотра

Когда мы вычисляем позицию DOM-элемента, то есть координаты, задействованы две системы координат.Координаты документа __ и __ координаты области просмотра. мы часто используемдокумент - это вся часть страницы, а не только видимая часть окна, а также включает в себя часть, где появляется полоса прокрутки из-за ограничения размера окна, а ее верхний левый угол — это то, что мы называем исходной точкой относительно координат документа.

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

Если документ меньше области просмотра, прокрутки нет, а левый верхний угол документа совпадает с левым верхним углом области просмотра, вообще говоря, для переключения между двумя системами координат необходимо добавить или вычесть смещение прокрутки.

Для преобразования между системами координат нам нужно определить положение полосы прокрутки окна браузера. PageXoffset и pageYoffset объекта окна предоставляют эти значения, за исключением IE 8 и более ранних версий. Положение полосы прокрутки также можно получить с помощью свойств scrollLeft и scrollTop,В обычных условиях эти значения свойств получаются путем запроса корневого узла документа (document.documentElement), но в режиме причуд они должны быть запрошены в теле документа..

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

Любой элемент HTML имеет свойства offectLeft и offectTop, которые возвращают координаты элемента X и Y. Для многих элементов эти значения являются координатами документа, но для позиционирования потомков элемента и некоторых других элементов (ячеек таблицы) значения возвращаются относительнопредоккоордината. Мы можем накапливать вычисления, просто рекурсивно возвращаясь назад.

function getElementPosition(e) {
  let x = 0;
  let y = 0;
  while (e != null) {
    x += e.offsetLeft;
    y += e.offsetTop;
    e = e.offsetParent;
  }
  return { x, y };
}

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

Быстрый способ:

Относительное расположение веб-элементов:

let X = element.getBoundingClientRect().left;
let Y = element.getBoundingClientRect().top;

координаты области просмотра

рассчитатькоординаты области просмотраЭто относительно просто, вы можете позвонитьэлементизgetBoundingClientRectметод. Метод возвращает объект со свойствами left, right, top, bottom, которые представляют собой координаты четырех позиций элемента относительно окна просмотра.getBoundingClientRectВозвращаемые координаты включают отступы и границы элемента., без учета полей. Совместимость очень хорошая, очень проста в использовании

function getElementViewTop(element) {
  let actualTop = element.offsetTop;
  let current = element.offsetParent;
  let elementScrollTop;

  while (current !== null) {
    actualTop += current.offsetTop;
    current = current.offsetParent;
  }

  if (document.compatMode == 'BackCompat') {
    elementScrollTop = document.body.scrollTop;
  } else {
    elementScrollTop = document.documentElement.scrollTop;
  }

  return actualTop - elementScrollTop;
}


function getElementViewLeft(element) {
  let actualLeft = element.offsetLeft;
  let current = element.offsetParent;
  let elementScrollLeft;

  while (current !== null) {
    actualLeft += current.offsetLeft;
    current = current.offsetParent;
  }

  if (document.compatMode == 'BackCompat') {
    elementScrollLeft = document.body.scrollLeft;
  } else {
    elementScrollLeft = document.documentElement.scrollLeft;
  }

  return actualLeft - elementScrollLeft;
}

Быстрый способ:

использоватьgetboundingClientRect()метод. Он возвращает объект, содержащийleft,top,width,heightи другие свойства.

let X = element.getBoundingClientRect().left;
let Y = element.getBoundingClientRect().top;

Добавьте расстояние прокрутки, чтобы получить абсолютное положение:

const X= element.getBoundingClientRect().left+document.documentElement.scrollLeft;
const Y =element.getBoundingClientRect().top+document.documentElement.scrollTop;