JavaScript. Подробное руководство, 6-е издание, Флэнаган Дэвид

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

на обложку

Флэнаган Дэвид

Шрифт:

Если документ меньше видимой области или если он еще не прокручивался, верхний левый угол документа находится в верхнем левом углу видимой области, и начала систем координат документа и видимой области совпадают. Однако в общем случае, чтобы перейти от одной системы координат к другой, необходимо добавлять или вычитать смещения прокрутки. Например, если координата 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. Получение позиций полос прокрутки окна

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

function getScrollOffsets(w) {

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

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

w = w || window;

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

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. Получение размеров видимой области документа

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

function getViewportSize(w) {

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

w = w || window;

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

if (w.innerWidth != null)

return {w:w.innerWidth,

h:w.innerHeight};

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

var d = w.document;

if (document.compatMode == "CSS1Compat")

return {w:d.documentElement.clientWidth,

h:d.documentElement.clientHeight };

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

return {w:d.body.clientWidth,

h:d.body.clientWidth };

}

В двух примерах выше использовались свойства

scrollLeft, scrollTop, clientWidth

clientHeight

. Мы встретимся с этими свойствами еще раз в разделе 15.8.5.

15.8.2. Определение геометрии элемента

Самый простой способ определить размеры и координаты элемента - обратиться к его методу

getBoundingClientRect.

Этот метод впервые появился в IE5 и в настоящее время реализован во всех текущих броузерах. Он не принимает аргументов и возвращает объект со свойствами

left, right, top

bottom

. Свойства

left

top

возвращают координаты X и Y верхнего левого угла элемента, а свойства

right

bottom

возвращают координаты правого нижнего угла.