JavaScript. Подробное руководство, 6-е издание, стр. 219

Метод

<b>elementFromPoint()</b>
выглядит весьма практичным, и наиболее очевидный случай его использования - определение элемента, находящегося под указателем мыши по его координатам. Однако, как будет показано в главе 17, объект события от мыши уже содержит эту информацию в своем свойстве
<b>target</b>
. Именно поэтому на практике метод
<b>elementFromPoint()</b>
почти не используется.

15.8.4. Прокрутка

В примере 15.8 демонстрировалось, как определять позиции полос прокрутки окна броузера. Чтобы заставить броузер прокрутить документ, можно присваивать значение используемым в этом примере свойствам

<b>scrollLeft</b>
и
<b>scrollTop</b>
, но существует более простой путь, поддерживаемый с самых ранних дней развития языка
<b>JavaScript</b>
. Метод
<b>scrollTo()</b>
объекта
<b>Window</b>
(и его синоним
<b>scroll()</b>
) принимает координаты X и Y точки (относительно начала координат документа) и устанавливает их в качестве величин смещения полос прокрутки. То есть он прокручивает окно так, что точка с указанными координатами оказывается в верхнем левом углу видимой области. Если указать точку, расположенную слишком близко к нижней или к правой границе документа, броузер попытается поместить эту точку как можно ближе к верхнему левому углу видимой области, но не сможет обеспечить точное их совпадение. Следующий пример прокручивает окно броузера так, что видимой оказывается самая нижняя часть документа:

<b>// Получить высоту документа и видимой области. Метод offsetHeight описывается ниже.</b>

<b>var documentHeight = document.documentElement.offsetHeight;</b>

<b>var viewportHeight = window.innerHeight; // Или использовать getViewportSize(),</b>

<b>                                         // описанный выше</b>

<b>// И прокрутить окно так, чтобы переместить последнюю &quot;страницу&quot; в видимую область </b>

<b>window.scrollTo(0, documentHeight - viewportHeight);</b>

Метод

<b>scrollBy()</b>
объекта
<b>Window</b>
похож на методы
<b>scroll()</b>
и
<b>scrollTo()</b>
, но их аргументы определяют относительное смещение и добавляются к текущим позициям полос прокрутки. Тем, кто умеет быстро читать, мог бы понравиться следующий букмарклет (раздел 13.2.5.1):

<b>// Прокручивает документ на 10 пикселов каждые 200 мсек.</b>

<b>// Учтите, что этот букмарклет нельзя отключить после запуска!</b>

<b>JavaScript:void setInterval(function() {scrollBy(0,10)}, 200);</b>

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

<b>getBoundingClientRect(),</b>
преобразовать их в координаты относительно начала документа и передать их методу
<b>scrollTo(),</b>
но гораздо проще воспользоваться методом
<b>scrollIntoView()</b>
требуемого HTML-элемента. Этот метод гарантирует, что элемент, относительно которого он будет вызван, окажется в видимой области. По умолчанию он старается прокрутить документ так, чтобы верхняя граница элемента оказалась как можно ближе к верхней границе видимой области. Если в единственном аргументе передать методу значение false, он попытается прокрутить документ так, чтобы нижняя граница элемента совпала с нижней границей видимой области. Кроме того, броузер выполнит прокрутку по горизонтали, если это потребуется, чтобы сделать элемент видимым.

Своим поведением метод

<b>scrollIntoView()</b>
напоминает свойство
<b>window.location.hash</b>
, когда ему присваивается имя якорного элемента (элемента
<b>&lt;а name= &gt;</b>
).

15.8.5. Подробнее о размерах, позициях и переполнении элементов

Метод

<b>getBoundingClientRect()</b>
поддерживается всеми текущими броузерами, но если требуется обеспечить поддержку броузеров более старых версий, этот метод использовать нельзя и для определения размеров и позиций элементов следует применять более старые приемы. Размеры элементов определяются достаточно просто: доступные только для чтения свойства
<b>offsetWidth</b>
и
<b>offsetHeight</b>
любого HTML-элемента возвращают его размеры в пикселах. Возвращаемые размеры включают рамку элемента и отступы, но не включают поля, окружающие рамку снаружи.

Все HTML-элементы имеют свойства

<b>offsetLeft</b>
и
<b>offsetTop</b>
, возвращающие их координаты X и Y. Для многих элементов эти координаты откладываются относительно начала документа и непосредственно определяют позицию элемента. Но для потомков позиционируемых элементов и некоторых других элементов, таких как ячейки таблиц, эти свойства возвращают координаты относительно элемента-предка, а не документа. Свойство
<b>offsetParent</b>
определяет, относительно какого элемента исчисляются значения этих свойств. Если
<b>offsetРаrent</b>
имеет значение null, свойства содержат координаты относительно начала документа. Таким образом, в общем случае для определения позиции элемента е с помощью его свойств
<b>offsetLeft</b>
и
<b>offsetTop</b>
требуется выполнить цикл:

<b>function getElementPosition(e) { </b>

<b>  var x = 0, у = 0; </b>

<b>  while(e != null) { </b>

<b>    x += e.offsetLeft; </b>

<b>    у += e.offsetTop; </b>

<b>    e = e.offsetParent;</b>

<b>  }</b>

<b>  return {x:x, у:у};</b>

<b>}</b>