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

В этом разделе рассказывается, как можно переходить от абстрактной, древовидной модели документа к геометрическому, основанному на системе координат визуальному представлению документа в окне броузера, и обратно. Свойства и методы, описываемые здесь, реализованы в броузерах достаточно давно (хотя есть некоторые, которые до недавнего времени присутствовали только в ІЕ, а некоторые не были реализованы в ІЕ до появления версии ІЕ9). К моменту написания этих строк они проходили процесс стандартизации консорциумом W3C в виде стандарта «CSSOM-View Module» ( http://www.w3.org/TR/cssom-view/).

15.8.1. Координаты документа и видимой области

Позиция элемента измеряется в пикселах. Координата X растет слева направо, а координата Y - сверху вниз. Однако существуют две точки, которые мы можем считать началом координат: координаты X и Y элемента могут отсчитываться относительно верхнего левого угла документа или относительно верхнего левого угла видимой области. Для окон верхнего уровня и вкладок «видимой областью» является часть окна броузера, в которой фактически отображается содержимое документа: в нее не входит обрамление окна (меню, панели инструментов, вкладки). Для документов, отображаемых во фреймах, видимой областью является элемент

<iframe>

, определяющий фрейм. В любом случае, когда речь заходит о позиции элемента, необходимо знать, какая система координат используется - относительно начала документа или относительно начала видимой области. (Координаты видимой области видимости иногда называют оконными координатами.)

Если документ меньше видимой области или если он еще не прокручивался, верхний левый угол документа находится в верхнем левом углу видимой области, и начала систем координат документа и видимой области совпадают. Однако в общем случае, чтобы перейти от одной системы координат к другой, необходимо добавлять или вычитать смещения прокрутки. Например, если координата Y элемента имеет значение 200 пикселов в системе координат документа и пользователь прокрутил документ вниз на 75, то в системе координат видимой области координата Y элемента будет иметь значение 125 пикселов. Аналогично, если координата X элемента имеет значение 400 в системе координат видимой области и пользователь прокрутил документ по горизонтали на 200 пикселов, то в системе координат документа координата X элемента будет иметь значение 600.

Система координат документа является более фундаментальной, чем система координат видимой области, и на нее не оказывает влияния величина прокрутки. Однако в клиентских сценариях довольно часто используются координаты видимой области. Система координат документа используется при позиционировании элементов с помощью CSS (глава 16). Но проще всего получить координаты элемента в системе координат видимой области (раздел 15.8.2). Аналогично, когда регистрируется функция-обработчик событий от мыши, координаты указателя мыши передаются ей в системе координат видимой области.

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

pageXOffset

pageYOffset

объекта

Window

. Кроме того, в IE (и во всех современных броузерах) позиции полос прокрутки можно узнать с помощью свойств

scrollLeft

scrollTop

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

document.documentElement

) документа, а в режиме совместимости (раздел 13.4.4) необходимо обращаться к элементу

<body>

(

document.body

) документа. Пример 15.8 показывает, как определять позиции полос прокрутки переносимым образом.

Пример 15.8. Получение позиций полос прокрутки окна

<b>// Возвращает текущие позиции полос прокрутки в виде свойств х и у объекта </b>

function getScrollOffsets(w) {

 // Использовать указанное окно или текущее,

 // если функция вызвана без аргумента 

 w = w || window;

<b>  // Следующий способ работает во всех броузерах, кроме IE версии 8 и ниже </b>

 if (w.pageXOffset != null) 

 return {x:w.pageXOffset,

 у:w.pageYOffset};

 // Для IE (и других броузеров) в стандартном режиме 

 var d = w.document;

 if (document.compatMode == "CSS1Compat") 

 return {x:d.documentElement.scrollLeft,

 у:d.documentElement.scrollTop};

 // Для броузеров в режиме совместимости

 return { х:d.body.scrollLeft,

 у:d.body.scrollTop };

}

Иногда бывает удобно иметь возможность определять размеры видимой области, например, чтобы определить, какая часть документа видима в настоящий момент. Как и в случае со смещениями прокрутки, самый простой способ узнать размеры видимой области не работает в IE версии 8 и ниже, а прием, который работает в IE, зависит от режима, в котором отображается документ. Пример 15.9 показывает, как переносимым способом определять размер видимой области. Обратите внимание на сходство программного кода этого примера с программным кодом в примере 15.8.

Пример 15.9. Получение размеров видимой области документа

<b>// Возвращает размеры видимой дбласти в виде свойств w и h объекта </b>

function getViewportSize(w) {

<b>  // Использовать указанное окно или текущее, если функция вызвана без аргумента </b>

 w = w || window;

<b>  // Следующий способ работает во всех броузерах, кроме IE версии 8 и ниже </b>

 if (w.innerWidth != null)

 return {w:w.innerWidth,

 h:w.innerHeight};