Чтение онлайн

на главную - закладки

Жанры

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

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

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-элемента возвращают его размеры в пикселах. Возвращаемые размеры включают рамку элемента и отступы, но не включают поля, окружающие рамку снаружи.

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

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

function getElementPosition(e) {

var x = 0, у = 0;

while(e != null) {

x += e.offsetLeft;

у += e.offsetTop;

e = e.offsetParent;

}

return {x:x, у:у};

}

Выполняя обход цепочки, образуемой ссылками

offsetParent
, и накапливая смещения, эта функция вычисляет координаты указанного элемента относительно начала документа. (Напомню, что метод
getBoundingClientRect,
напротив, возвращает координаты относительно начала видимой области.) Однако на этом тему позиционирования элементов нельзя считать исчерпанной - функция
getElementPosition
не всегда вычисляет правильные значения, и ниже будет показано, как исправить эту ошибку.

В дополнение к множеству свойств

offset
все элементы документа определяют еще две группы свойств; имена свойств в первой группе начинаются с приставки
client
, а во второй группе - с приставки
scroll
. То есть каждый HTML-элемент имеет все свойства, перечисленные ниже:

offsetWidth

offsetHeight

offsetLeft

offsetTop

offsetParent

clientWidth

clientHeight

clientLeft

clientTop

scrollWidth

scrollHeight

scrollLeft

scrollTop

Чтобы понять разницу между группами свойств

client
и
scroll
, необходимо уяснить, что объем содержимого HTML-элемента может не умещаться в прямоугольную область, выделенную для этого содержимого, и поэтому отдельные элементы могут иметь собственные полосы прокрутки (смотрите описание CSS-атрибута
overflow
в разделе 16.2.6). Область отображения содержимого - это видимая область, подобная видимой области в окне броузера, и когда содержимое элемента не умещается в видимой области, необходимо принимать в учет позиции полос прокрутки элемента.

Свойства

clientWidth
и
clientHeight
похожи на свойства
offsetWidth
и
offsetHeight
, за исключением того, что они включают только область содержимого и отступы и не включают размер рамки. Кроме того, если броузер добавляет между рамкой и отступами полосы прокрутки, то свойства
clientWidth
и
clientHeight
не включают ширину полос прокрутки в возвращаемые значения. Обратите внимание, что для строчных элементов, таких как
<i>, <code>
и
<span>
, свойства
clientWidth
и
clientHeight
всегда возвращают 0.

Свойства

clientWidth
и
clientHeight
использовались в методе
getViewportSize
из примера 15.9. В том случае, когда эти свойства применяются к корневому элементу документа (или телу элемента в режиме совместимости), они возвращают те же значения, что и свойства
innerWidth
и
innerHeight
окна.

Свойства

clientLeft
и
clientTop
не имеют большой практической ценности: они возвращают расстояние по горизонтали и вертикали между внешней границей отступов элемента и внешней границей его рамки. Обычно эти значения просто определяют ширину левой и верхней рамки. Однако если элемент имеет полосы прокрутки и если броузер помещает эти полосы прокрутки вдоль левого или верхнего края (что весьма необычно), значения свойств
clientLeft
и
clientTop
также будут включать ширину полос прокрутки. Для строчных элементов свойства
clientLeft
и
clientTop
всегда возвращают 0.

Поделиться:
Популярные книги

Ты - наша

Зайцева Мария
1. Наша
Любовные романы:
современные любовные романы
эро литература
5.00
рейтинг книги
Ты - наша

Тактик

Земляной Андрей Борисович
2. Офицер
Фантастика:
альтернативная история
7.70
рейтинг книги
Тактик

Товарищ "Чума" 9

lanpirot
9. Товарищ "Чума"
Фантастика:
городское фэнтези
попаданцы
альтернативная история
5.00
рейтинг книги
Товарищ Чума 9

Я уже князь. Книга XIX

Дрейк Сириус
19. Дорогой барон!
Фантастика:
юмористическое фэнтези
попаданцы
аниме
5.00
рейтинг книги
Я уже князь. Книга XIX

Последний реанорец. Том I и Том II

Павлов Вел
1. Высшая Речь
Фантастика:
фэнтези
7.62
рейтинг книги
Последний реанорец. Том I и Том II

Ученик

Первухин Андрей Евгеньевич
1. Ученик
Фантастика:
фэнтези
6.20
рейтинг книги
Ученик

КАМЕРГЕРСКИЙ ПЕРЕУЛОК

Орлов Владимир Викторович
Фантастика:
фэнтези
6.00
рейтинг книги
КАМЕРГЕРСКИЙ ПЕРЕУЛОК

Наследие Маозари

Панежин Евгений
1. Наследие Маозари
Фантастика:
рпг
попаданцы
аниме
5.80
рейтинг книги
Наследие Маозари

Законник Российской Империи. Том 2

Ткачев Андрей Юрьевич
2. Словом и делом
Фантастика:
городское фэнтези
альтернативная история
аниме
дорама
6.40
рейтинг книги
Законник Российской Империи. Том 2

Linux программирование в примерах

Роббинс Арнольд
Компьютеры и Интернет:
программирование
ос и сети
5.00
рейтинг книги
Linux программирование в примерах

Князь Целитель 3

Ткачев Андрей Юрьевич
3. Князь Целитель
Фантастика:
боевая фантастика
городское фэнтези
аниме
фэнтези
5.00
рейтинг книги
Князь Целитель 3

Пламенев. Книга 3-7

Карелин Сергей Витальевич
Пламенев
Фантастика:
аниме
уся
фэнтези
сянься
5.00
рейтинг книги
Пламенев. Книга 3-7

Неучтенный элемент. Том 11

NikL
11. Антимаг. Вне системы
Фантастика:
фэнтези
5.00
рейтинг книги
Неучтенный элемент. Том 11

Старый, но крепкий 5

Крынов Макс
5. Культивация без насилия
Фантастика:
рпг
аниме
уся
фэнтези
5.00
рейтинг книги
Старый, но крепкий 5