Размеры и прокрутка элементов
Существует множество JavaScript-свойств, которые позволяют считывать информацию об элементе: ширину, высоту и другие геометрические характеристики. В этой главе мы будем называть их «метрики».
Они часто требуются, когда нам нужно передвигать или позиционировать элементы с помощью JavaScript.
#браузер #документ #размеры
Существует множество JavaScript-свойств, которые позволяют считывать информацию об элементе: ширину, высоту и другие геометрические характеристики. В этой главе мы будем называть их «метрики».
Они часто требуются, когда нам нужно передвигать или позиционировать элементы с помощью JavaScript.
#браузер #документ #размеры
👍7🔥1
Размеры и полоса прокрутки: общий вид
У элемента есть рамка
#браузер #документ #размеры
У элемента есть рамка
border, внутренний отступ padding и прокрутка. Полный набор характеристик. Обратите внимание, тут нет внешних отступов margin, потому что они не являются частью элемента, для них нет особых JavaScript-свойств.#браузер #документ #размеры
👍5🔥1
Внимание, полоса прокрутки
В иллюстрации выше намеренно продемонстрирован самый сложный и полный случай, когда у элемента есть ещё и полоса прокрутки. Некоторые браузеры (не все) отбирают место для неё, забирая его у области, отведённой для содержимого (помечена как «
Таким образом, без учёта полосы прокрутки ширина области содержимого (content width) будет
#браузер #документ #размеры
В иллюстрации выше намеренно продемонстрирован самый сложный и полный случай, когда у элемента есть ещё и полоса прокрутки. Некоторые браузеры (не все) отбирают место для неё, забирая его у области, отведённой для содержимого (помечена как «
content width» выше).Таким образом, без учёта полосы прокрутки ширина области содержимого (content width) будет
300px, но если предположить, что ширина полосы прокрутки равна 16px (её точное значение зависит от устройства и браузера), тогда остаётся только 300 - 16 = 284px, и мы должны это учитывать. Вот почему примеры в этой главе даны с полосой прокрутки. Без неё некоторые вычисления будут проще.#браузер #документ #размеры
👍4🔥2
Всем привет, ребята!
Наверное, у вас, как и у меня, часто бывает такое, что приходится очень долго искать реально годный видос по JavaScript, чтобы посмотреть его во время завтрака и заодно прокачаться немного.
Не знаю как у вас, но у меня эта проблема возникает практически каждый день. В поисках решения я нашёл канал @sign_in_it. Там каждый день выходят реально полезные и интересные ролики по Frontend-разработке и не только.
Загляните, посмотрите пару постов, возможно и вам зайдет.
P.S. Накидайте огоньков, если канал вам оказался по душе 🔥
#полезное
Наверное, у вас, как и у меня, часто бывает такое, что приходится очень долго искать реально годный видос по JavaScript, чтобы посмотреть его во время завтрака и заодно прокачаться немного.
Не знаю как у вас, но у меня эта проблема возникает практически каждый день. В поисках решения я нашёл канал @sign_in_it. Там каждый день выходят реально полезные и интересные ролики по Frontend-разработке и не только.
Загляните, посмотрите пару постов, возможно и вам зайдет.
P.S. Накидайте огоньков, если канал вам оказался по душе 🔥
#полезное
🔥12👍1
Метрики
Вот общая картина с геометрическими свойствами. Значениями свойств являются числа, подразумевается, что они в пикселях.
К ней мы часто будем возвращаться в следующих постах и описывать отдельные составляющие. А пока просто изучите, что за что примерно отвечает.
#браузер #документ #размеры
Вот общая картина с геометрическими свойствами. Значениями свойств являются числа, подразумевается, что они в пикселях.
К ней мы часто будем возвращаться в следующих постах и описывать отдельные составляющие. А пока просто изучите, что за что примерно отвечает.
#браузер #документ #размеры
👍4🔥4
offsetParent, offsetLeft/Top
Эти свойства редко используются, но так как они являются «самыми внешними» метриками, мы начнём с них.
В свойстве
То есть, ближайший предок, который удовлетворяет следующим условиям:
- Является CSS-позиционированным (CSS-свойство
- или
- или
Свойства
В примере выше внутренний
#браузер #документ #размеры
Эти свойства редко используются, но так как они являются «самыми внешними» метриками, мы начнём с них.
В свойстве
offsetParent находится предок элемента, который используется внутри браузера для вычисления координат при рендеринге.То есть, ближайший предок, который удовлетворяет следующим условиям:
- Является CSS-позиционированным (CSS-свойство
position равно absolute, relative, fixed или sticky),- или
<td>, <th>, <table>,- или
<body>.Свойства
offsetLeft/offsetTop содержат координаты x/y относительно верхнего левого угла offsetParent.В примере выше внутренний
<div> имеет элемент <main> в качестве offsetParent, а свойства offsetLeft/offsetTop являются сдвигами относительно верхнего левого угла (180).#браузер #документ #размеры
👍5🔥2
Вот так выглядят свойства offsetParent, offsetLeft/Top
Подробное описание можете посмотреть постом выше: https://t.me/notesjs/367
#браузер #документ #размеры
Подробное описание можете посмотреть постом выше: https://t.me/notesjs/367
#браузер #документ #размеры
👍4🔥1
offsetWidth/Height
Теперь переходим к самому элементу.
Эти два свойства – самые простые. Они содержат «внешнюю» ширину/высоту элемента, то есть его полный размер, включая рамки.
Для нашего элемента:
-
-
#браузер #документ #размеры
Теперь переходим к самому элементу.
Эти два свойства – самые простые. Они содержат «внешнюю» ширину/высоту элемента, то есть его полный размер, включая рамки.
Для нашего элемента:
-
offsetWidth = 390 – внешняя ширина блока, её можно получить сложением CSS-ширины (300px), внутренних отступов (2 * 20px) и рамок (2 * 25px).-
offsetHeight = 290 – внешняя высота блока.#браузер #документ #размеры
👍9🔥2
Метрики для не показываемых элементов равны нулю.
Координаты и размеры в JavaScript устанавливаются только для видимых элементов.
Если элемент (или любой его родитель) имеет
Например, свойство
Мы можем использовать это, чтобы делать проверку на видимость.
Заметим, что функция
#браузер #документ #размеры
Координаты и размеры в JavaScript устанавливаются только для видимых элементов.
Если элемент (или любой его родитель) имеет
display:none или отсутствует в документе, то все его метрики равны нулю (или null, если это offsetParent).Например, свойство
offsetParent равно null, а offsetWidth и offsetHeight равны 0, когда мы создали элемент, но ещё не вставили его в документ, или если у элемента (или у его родителя) display:none.Мы можем использовать это, чтобы делать проверку на видимость.
Заметим, что функция
isHidden также вернёт true для элементов, которые в принципе показываются, но их размеры равны нулю (например, пустые <div>).#браузер #документ #размеры
👍9🔥2
clientTop/Left
Пойдём дальше. Внутри элемента у нас рамки (border).
Для них есть свойства-метрики
В нашем примере:
-
-
Но на самом деле эти свойства – вовсе не ширины рамок, а отступы внутренней части элемента от внешней.
#браузер #документ #размеры
Пойдём дальше. Внутри элемента у нас рамки (border).
Для них есть свойства-метрики
clientTop и clientLeft.В нашем примере:
-
clientLeft = 25 – ширина левой рамки-
clientTop = 25 – ширина верхней рамкиНо на самом деле эти свойства – вовсе не ширины рамок, а отступы внутренней части элемента от внешней.
#браузер #документ #размеры
👍5🔥2
This media is not supported in your browser
VIEW IN TELEGRAM
Прокачивай свой технический английский без больших усилий, уделяя 5 минут в день!
На этом канале регулярно публикуют самые популярные слова и выражения из мира IT.
Подойдет всем IT-специалистам, которые хотят без труда читать документацию на английском и свободно общаться с иностранными заказчиками.
Подписывайся на @enforit и качай свой инглиш, пока компилируется проект👌
На этом канале регулярно публикуют самые популярные слова и выражения из мира IT.
Подойдет всем IT-специалистам, которые хотят без труда читать документацию на английском и свободно общаться с иностранными заказчиками.
Подписывайся на @enforit и качай свой инглиш, пока компилируется проект👌
👍1
scrollWidth/Height
Эти свойства – как
На рисунке выше:
-
-
Эти свойства можно использовать, чтобы «распахнуть» элемент на всю ширину/высоту.
#браузер #документ #размеры
Эти свойства – как
clientWidth/clientHeight, но также включают в себя прокрученную (которую не видно) часть элемента.На рисунке выше:
-
scrollHeight = 723 – полная внутренняя высота, включая прокрученную область.-
scrollWidth = 324 – полная внутренняя ширина, в данном случае прокрутки нет, поэтому она равна clientWidth.Эти свойства можно использовать, чтобы «распахнуть» элемент на всю ширину/высоту.
#браузер #документ #размеры
👍9🔥2
scrollLeft/scrollTop
Свойства
Следующая иллюстрация показывает значения
Другими словами, свойство
#браузер #документ #размеры
Свойства
scrollLeft/scrollTop – ширина/высота невидимой, прокрученной в данный момент, части элемента слева и сверху.Следующая иллюстрация показывает значения
scrollHeight и scrollTop для блока с вертикальной прокруткой.Другими словами, свойство
scrollTop – это «сколько уже прокручено вверх».#браузер #документ #размеры
👍7🔥2
Свойства scrollLeft/scrollTop можно изменять
В отличие от большинства свойств, которые доступны только для чтения, значения
При клике на следующий элемент будет выполняться код
Установка значения
#браузер #документ #размеры
В отличие от большинства свойств, которые доступны только для чтения, значения
scrollLeft/scrollTop можно изменять, и браузер выполнит прокрутку элемента.При клике на следующий элемент будет выполняться код
elem.scrollTop += 10. Поэтому он будет прокручиваться на 10px вниз.Установка значения
scrollTop на 0 или Infinity прокрутит элемент в самый верх/низ соответственно.#браузер #документ #размеры
👍7🔥1
Не window.innerWidth/Height
Браузеры также поддерживают свойства
Если есть полоса прокрутки, и она занимает какое-то место, то свойства
А
Если полоса прокрутки занимает некоторое место, то эти две строки выведут разные значения.
#браузер #документ #размеры
Браузеры также поддерживают свойства
window.innerWidth/innerHeight. Вроде бы, похоже на то, что нам нужно. Почему же не использовать их?Если есть полоса прокрутки, и она занимает какое-то место, то свойства
clientWidth/clientHeight указывают на ширину/высоту документа без неё (за её вычетом). Иными словами, они возвращают высоту/ширину видимой части документа, доступной для содержимого.А
window.innerWidth/innerHeight включают в себя полосу прокрутки.Если полоса прокрутки занимает некоторое место, то эти две строки выведут разные значения.
#браузер #документ #размеры
👍8🔥1
Ширина/высота документа
Теоретически, т.к. корневым элементом документа является
Но именно на этом элементе, для страницы в целом, эти свойства работают не так, как предполагается. В Chrome/Safari/Opera, если нет прокрутки, то
Чтобы надёжно получить полную высоту документа, нам следует взять максимальное из этих свойств.
#браузер #документ #размеры
Теоретически, т.к. корневым элементом документа является
documentElement, и он включает в себя всё содержимое, мы можем получить полный размер документа как documentElement.scrollWidth/scrollHeight.Но именно на этом элементе, для страницы в целом, эти свойства работают не так, как предполагается. В Chrome/Safari/Opera, если нет прокрутки, то
documentElement.scrollHeight может быть даже меньше, чем documentElement.clientHeight! С точки зрения элемента это невозможная ситуация.Чтобы надёжно получить полную высоту документа, нам следует взять максимальное из этих свойств.
#браузер #документ #размеры
👍4❤1🔥1
Получение текущей прокрутки
Обычные элементы хранят текущее состояние прокрутки в
Что же со страницей? В большинстве браузеров мы можем обратиться к
К счастью, нам совсем не обязательно запоминать эти особенности, потому что текущую прокрутку можно прочитать из свойств
Эти свойства доступны только для чтения.
#браузер #документ #размеры
Обычные элементы хранят текущее состояние прокрутки в
elem.scrollLeft/scrollTop.Что же со страницей? В большинстве браузеров мы можем обратиться к
documentElement.scrollLeft/Top, за исключением основанных на старом WebKit (Safari), где есть ошибка (5991), и там нужно использовать document.body вместо document.documentElement.К счастью, нам совсем не обязательно запоминать эти особенности, потому что текущую прокрутку можно прочитать из свойств
window.pageXOffset/pageYOffsetЭти свойства доступны только для чтения.
#браузер #документ #размеры
👍3🔥1