Свойства scrollLeft/scrollTop можно изменять

В отличие от большинства свойств, которые доступны только для чтения, значения scrollLeft/scrollTop можно изменять, и браузер выполнит прокрутку элемента.

При клике на следующий элемент будет выполняться код elem.scrollTop += 10. Поэтому он будет прокручиваться на 10px вниз.

Установка значения scrollTop на 0 или Infinity прокрутит элемент в самый верх/низ соответственно.

#браузер #документ #размеры

Ширина/высота окна

Чтобы получить ширину/высоту окна, можно взять свойства clientWidth/clientHeight из document.documentElement

#браузер #документ #размеры

Не window.innerWidth/Height

Браузеры также поддерживают свойства window.innerWidth/innerHeight. Вроде бы, похоже на то, что нам нужно. Почему же не использовать их?

Если есть полоса прокрутки, и она занимает какое-то место, то свойства clientWidth/clientHeight указывают на ширину/высоту документа без неё (за её вычетом). Иными словами, они возвращают высоту/ширину видимой части документа, доступной для содержимого.

А window.innerWidth/innerHeight включают в себя полосу прокрутки.

Если полоса прокрутки занимает некоторое место, то эти две строки выведут разные значения.

#браузер #документ #размеры

Ширина/высота документа

Теоретически, т.к. корневым элементом документа является documentElement, и он включает в себя всё содержимое, мы можем получить полный размер документа как documentElement.scrollWidth/scrollHeight.

Но именно на этом элементе, для страницы в целом, эти свойства работают не так, как предполагается. В Chrome/Safari/Opera, если нет прокрутки, то documentElement.scrollHeight может быть даже меньше, чем documentElement.clientHeight! С точки зрения элемента это невозможная ситуация.

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

#браузер #документ #размеры

Получение текущей прокрутки

Обычные элементы хранят текущее состояние прокрутки в elem.scrollLeft/scrollTop.

Что же со страницей? В большинстве браузеров мы можем обратиться к documentElement.scrollLeft/Top, за исключением основанных на старом WebKit (Safari), где есть ошибка (5991), и там нужно использовать document.body вместо document.documentElement.

К счастью, нам совсем не обязательно запоминать эти особенности, потому что текущую прокрутку можно прочитать из свойств window.pageXOffset/pageYOffset

Эти свойства доступны только для чтения.

#браузер #документ #размеры

Window.scrollTo()

Метод для прокрутки документа до указанных координат.

Параметры:
x-coord пиксель по горизонтальной оси документа, будет отображён вверху слева.
y-coord пиксель по вертикальной оси документа, будет отображён вверху слева.

#браузер #документ #размеры

Window.scrollBy()

Прокручивает документ на указанные величины.

Параметры:
X - смещение в пикселях по горизонтали.
Y - смещение в пикселях по вертикали.

#браузер #документ #размеры

Element.scrollIntoView()

Метод Element.scrollIntoView() интерфейса Element прокручивает контейнер родителя элемента так, чтобы элемент, на котором был вызван scrollIntoView(), стал виден пользователю.

#браузер #документ #размеры

Запретить прокрутку

Иногда нам нужно сделать документ «непрокручиваемым». Например, при показе большого диалогового окна над документом – чтобы посетитель мог прокручивать это окно, но не документ.

Чтобы запретить прокрутку страницы, достаточно установить document.body.style.overflow = "hidden".

Аналогичным образом мы можем «заморозить» прокрутку для других элементов, а не только для document.body.

Недостатком этого способа является то, что сама полоса прокрутки исчезает. Если она занимала некоторую ширину, то теперь эта ширина освободится, и содержимое страницы расширится, текст «прыгнет», заняв освободившееся место.

Это выглядит немного странно, но это можно обойти, если сравнить clientWidth до и после остановки, и если clientWidth увеличится (значит полоса прокрутки исчезла), то добавить padding в document.body вместо полосы прокрутки, чтобы оставить ширину содержимого прежней.

#браузер #документ #размеры

Element.getBoundingClientRect()

Метод Element.getBoundingClientRect() возвращает размер элемента и его позицию относительно viewport (часть страницы, показанная на экране, и которую мы видим).

Результатом является самый маленький прямоугольник, в котором содержится весь элемент с read-only left, top, right, bottom, x, y, width и height свойствами, описывающие это в пикселях. Все свойства, кроме width и height, являются относительными к верхнему левому углу viewport-а.

#браузер #документ #координаты

Зачем вообще нужны зависимые свойства? Для чего существуют top/left, если есть x/y?

С математической точки зрения, прямоугольник однозначно задаётся начальной точкой (x,y) и вектором направления (width,height).

Так что дополнительные зависимые свойства существуют лишь для удобства.

Что же касается top/left, то они на самом деле не всегда равны x/y. Технически, значения width/height могут быть отрицательными. Это позволяет задать «направленный» прямоугольник, например, для выделения мышью с отмеченным началом и концом.

То есть, отрицательные значения width/height означают, что прямоугольник «растет» влево-вверх из правого угла.

#браузер #документ #координаты

elementFromPoint(x, y)

Вызов document.elementFromPoint(x, y) возвращает самый глубоко вложенный элемент в окне, находящийся по координатам (x, y).

Например, код выше выделяет с помощью стилей и выводит имя тега элемента, который сейчас в центре окна браузера.

#браузер #документ #координаты

Применение для fixed позиционирования

Чаще всего нам нужны координаты для позиционирования чего-либо.

Чтобы показать что-то около нужного элемента, мы можем вызвать getBoundingClientRect, чтобы получить его координаты элемента, а затем использовать CSS-свойство position вместе с left/top (или right/bottom).

Например, функция createMessageUnder(elem, html) выше показывает сообщение под элементом elem.

#браузер #документ #координаты

Введение в браузерные события

Событие – это сигнал от браузера о том, что что-то произошло. Все DOM-узлы подают такие сигналы (хотя события бывают и не только в DOM).

Вот список самых часто используемых DOM-событий, пока просто для ознакомления:

События мыши:
click – происходит, когда кликнули на элемент левой кнопкой мыши.
contextmenu – происходит, когда кликнули на элемент правой кнопкой мыши.
mouseover / mouseout – когда мышь наводится на / покидает элемент.
mousedown / mouseup – когда нажали / отжали кнопку мыши на элементе.
mousemove – при движении мыши.

События на элементах управления:
submit – пользователь отправил форму <form>.
focus – пользователь фокусируется на элементе.

Клавиатурные события:
keydown и keyup – когда пользователь нажимает / отпускает клавишу.

События документа:
DOMContentLoaded – когда HTML загружен и обработан.

CSS events:
transitionend – когда CSS-анимация завершена.

Существует множество других событий. О них в следующих постах.

#браузер #документ #события

Обработчики событий

Событию можно назначить обработчик, то есть функцию, которая сработает, как только событие произошло.

Именно благодаря обработчикам JavaScript-код может реагировать на действия пользователя.

Есть несколько способов назначить событию обработчик. Мы их рассмотрим, начиная с самого простого.

#браузер #документ #события

Использование атрибута HTML

Обработчик может быть назначен прямо в разметке, в атрибуте, который называется on<событие>.

Например, чтобы назначить обработчик события click на элементе input, можно использовать атрибут onclick.

#браузер #документ #события

Использование свойства DOM-объекта

Можно назначать обработчик, используя свойство DOM-элемента on<событие>.

К примеру, elem.onclick.

Если обработчик задан через атрибут, то браузер читает HTML-разметку, создаёт новую функцию из содержимого атрибута и записывает в свойство.

#браузер #документ #события

Обработчик в атрибуте и свойстве

Обработчик всегда хранится в свойстве DOM-объекта, а атрибут – лишь один из способов его инициализации.

Так как у элемента DOM может быть только одно свойство с именем onclick, то назначить более одного обработчика так нельзя.

P.S. Два примера кода на картинке работают одинаково.

#браузер #документ #события

HTML-атрибуты

В HTML у тегов могут быть атрибуты. Когда браузер парсит HTML, чтобы создать DOM-объекты для тегов, он распознаёт стандартные атрибуты и создаёт DOM-свойства для них.

Таким образом, когда у элемента есть id или другой стандартный атрибут, создаётся соответствующее свойство. Но этого не происходит,
если атрибут нестандартный.

#браузер #документ #атрибуты_свойств

Доступ к элементу через this

Внутри обработчика события this ссылается на текущий элемент, то есть на тот, на котором, как говорят, «висит» (т.е. назначен) обработчик.

В коде выше button выводит своё содержимое, используя this.innerHTML.

#браузер #документ #события