Шрифт:
Для определения координат и размеров отдельных прямоугольников, занимаемых строчными элементами, можно воспользоваться методом
getClientRects
, который возвращает объект, подобный массиву, доступный только для чтения, чьи элементы представляют объекты прямоугольных областей, подобные тем, что возвращаются методом getBoundingClientRect
. Мы уже знаем, что методы модели DOM, такие как
getElementsByTagName
, возвращают «живые» результаты, изменяющиеся синхронно с изменением документа. Объекты прямоугольных областей (и списки объектов прямоугольных областей), возвращаемые методами getBoundingClientRect
и getClientRects
не являются «живыми». Они хранят статические сведения о визуальном представлении документа на момент вызова. Они не обновляются, если пользователь прокрутит документ или изменит размеры окна броузера. 15.8.3. Определение элемента в указанной точке
Метод
getBoundingClientRect
позволяет узнать текущую позицию элемента в видимой области. Но иногда бывает необходимо решить обратную задачу - узнать, какой элемент находится в заданной точке внутри видимой области. Сделать это можно с помощью метода elementFromPoint
объекта Document
. Он принимает координаты X и Y (относительно начала координат видимой области, а не документа) и возвращает объект Element
, находящийся в этой позиции. На момент написания этих строк алгоритм выбора элемента не был строго определен, но суть реализации метода сводится к тому, что он должен возвращать самый внутренний и самый верхний (в смысле CSS-атрибута z-index, который описывается в разделе 16.2.1.1) элемент, находящийся в этой точке. Если передать ему координаты точки, находящейся за пределами видимой области, метод elementFromPoint
вернет null, даже если после преобразования координат в систему координат документа получится вполне допустимая точка. Метод
elementFromPoint
выглядит весьма практичным, и наиболее очевидный случай его использования - определение элемента, находящегося под указателем мыши по его координатам. Однако, как будет показано в главе 17, объект события от мыши уже содержит эту информацию в своем свойстве target
. Именно поэтому на практике метод elementFromPoint
почти не используется. 15.8.4. Прокрутка
В примере 15.8 демонстрировалось, как определять позиции полос прокрутки окна броузера. Чтобы заставить броузер прокрутить документ, можно присваивать значение используемым в этом примере свойствам
scrollLeft
и scrollTop
, но существует более простой путь, поддерживаемый с самых ранних дней развития языка JavaScript
. Метод scrollTo
объекта Window
(и его синоним scroll
) принимает координаты X и Y точки (относительно начала координат документа) и устанавливает их в качестве величин смещения полос прокрутки. То есть он прокручивает окно так, что точка с указанными координатами оказывается в верхнем левом углу видимой области. Если указать точку, расположенную слишком близко к нижней или к правой границе документа, броузер попытается поместить эту точку как можно ближе к верхнему левому углу видимой области, но не сможет обеспечить точное их совпадение. Следующий пример прокручивает окно броузера так, что видимой оказывается самая нижняя часть документа:
// Получить высоту документа и видимой области. Метод offsetHeight описывается ниже.
var documentHeight = document.documentElement.offsetHeight;
var viewportHeight = window.innerHeight; // Или использовать getViewportSize,
// описанный выше
// И прокрутить окно так, чтобы переместить последнюю "страницу" в видимую область
window.scrollTo(0, documentHeight - viewportHeight);
Метод
scrollBy
объекта Window
похож на методы scroll
и scrollTo
, но их аргументы определяют относительное смещение и добавляются к текущим позициям полос прокрутки. Тем, кто умеет быстро читать, мог бы понравиться следующий букмарклет (раздел 13.2.5.1):
// Прокручивает документ на 10 пикселов каждые 200 мсек.
// Учтите, что этот букмарклет нельзя отключить после запуска!
JavaScript:void setInterval(function {scrollBy(0,10)}, 200);
Часто требуется прокрутить документ не до определенных числовых координат, а до элемента в документе, который нужно сделать его видимым. В этом случае можно определить координаты элемента с помощью метода
getBoundingClientRect,
преобразовать их в координаты относительно начала документа и передать их методу scrollTo,
но гораздо проще воспользоваться методом scrollIntoView
требуемого HTML-элемента. Этот метод гарантирует, что элемент, относительно которого он будет вызван, окажется в видимой области. По умолчанию он старается прокрутить документ так, чтобы верхняя граница элемента оказалась как можно ближе к верхней границе видимой области. Если в единственном аргументе передать методу значение false, он попытается прокрутить документ так, чтобы нижняя граница элемента совпала с нижней границей видимой области. Кроме того, броузер выполнит прокрутку по горизонтали, если это потребуется, чтобы сделать элемент видимым. Своим поведением метод
scrollIntoView
напоминает свойство window.location.hash
, когда ему присваивается имя якорного элемента (элемента <а name= >
). 15.8.5. Подробнее о размерах, позициях и переполнении элементов
Метод
getBoundingClientRect
поддерживается всеми текущими броузерами, но если требуется обеспечить поддержку броузеров более старых версий, этот метод использовать нельзя и для определения размеров и позиций элементов следует применять более старые приемы. Размеры элементов определяются достаточно просто: доступные только для чтения свойства offsetWidth
и offsetHeight
любого HTML-элемента возвращают его размеры в пикселах. Возвращаемые размеры включают рамку элемента и отступы, но не включают поля, окружающие рамку снаружи.