JavaScript размеры прокрутка и координаты элементов на странице и окна браузера.

Продолжаем изучать JavaScript и сегодня поговорим о размерах, прокрутке и координатах окна и объектов на странице. В JavaScript существуют множество свойств, которые позволяют получить информацию об элементе: ширину, высоту и другие геометрические характеристики. Они часто требуются, когда нам нужно передвигать или позиционировать элементы с помощью JavaScript. Для начала поговорим о том, как узнать ширину и высоту окна браузера, получить полную ширину и высоту документа, включая прокрученную часть. А также, прокрутить страницу с помощью JavaScript. Также поговорим о размерах, координатах, прокрутке элементов на странице и методе getBoundingClientRect.

00:00 - В уроке
00:13 - Ширина и высота окна браузера
02:40 - Полная ширина и высота страницы
03:55 - Получение кол-ва прокрученных пикселей
05:08 - Управление скроллом. Метод scrollBy
06:54 - Управление скроллом. Метод scrollTo
09:31 - Управление скроллом. Метод scrollIntoView
13:57 - Метрики элементов на странице
14:55 - Свойства offsetParent, offsetLeft и offsetTop
19:01 - Свойства offsetWidth и offsetHeight
20:02 - Свойства clientTop и clientLeft
21:12 - Свойства clientWidth и clientHeight
22:18 - Свойства scrollWidth и scrollHeight
23:07 - Свойства scrollLeft и scrollTop
23:07 - Управление скроллом элемента
24:55 - Координаты элементов на странице
26:22 - getBoundingClientRect
31:26 - elementFromPoint
32:35 - Домашка
33:31 - Заключение

👋 Меня зовут Женя Андриканич, я IT - специалист, занимаюсь разработкой сайтов. На этом канале, я регулярно и в максимально доступном формате буду делиться с тобой своим опытом, наработками, секретами и лайфхаками!

🤟 Живи, а работай в свободное время! ©

[xscbdcs]

Я в онемении! Фантастика! Так четко и понятно! Громаднейшая подготовительная работа! К этому видео я буду возвращаться как к конспекту снова и снова! Женя, так излагать - это дар! Спасибо-спасибо-спасибо!!!

[elliotown]

Вот насколько с душой Женя делает свои уроки, которые доступны в открытом доступе! Сделаны кнопки, обозначены блоки, все понятно и практично! Мне сложно представить сколько времени и сил в это вложено. Это огромный вклад в образование. Требую памятник как минимум в центре Ужгорода!

[no_way_back]

Перед просмотром всегда жмите лайк, только потом приступайте к просмотру! :)
Женя спасибо за труды и качественную подачу материала, лучший!

[jozef]

Это один из важнейших уроков, на мой взгляд

[mxnsxsh]

Круто як завжди)) а стабільність ознака майстерності☝️

[bekmirzoazimov]

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

[mzx]

Четко, без воды, с результатом, не перестаю удивляться, как такое можно находить в бесплатном доступе, спасибо вам:)

[natalka]

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

[serezha_videoblog]

Наконец-то комплексно изучу эту тему! Спасибо!!!

[pitbrest]

Объемный урок, нужно повторить не раз и не два) Спасибо за твой труд!

[Rasty_Boss]

Ти випускаєш відео дуже наближенні по темі які я прохожу на курсах, дякую

[shukonfadah]

все ваши виде это лучшее что можно найти на русскоязычном сегменте! Я поддерживаю вас во всём! желаю мира и спокойствия вашей стране и семье

[djldjcx]

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

[andreiribac]

Огромное спасибо! Доступно, четко, разжевано! Низкий поклон за Ваш труд!

[avelo]

У Вас самые понятные и практические материалы. Большое спасибо за Ваш труд. Очень полезно.

[qnzfjsy]

Однозначно, к просмотру и пересмотру-очень выручают видеоуроки! Да и человек не может все запомнить! Спасибо за проделанную работу!

[qcoleey]

Этот урок заслуживает отдельного лайка )))

[konstantino]

Ураааа! Новое видео! Ещё не дошёл до этого урока (я вообще на flex) но ради просмотра, лайка и коммента смотрю сейчас, пока кофе пью

[coolday]

1) Ширина полосы прокрутки по Y:

const width = document.documentElement;
const mainWidth = width.clientWidth;
const windowWidth = window.innerWidth;
console.log(windowWidth - mainWidth);


2) Прокрутка на 100px с задержкой в 1с:

function scrollPage() {
window.scrollTo({
top: 100,
left: 0,
behavior: "smooth"
})
};
setTimeout(scrollPage, 1000);

Но тут нюанс, что не сказано от верха элемента или от всей страницы, поэтому можно использовать и srcollBy()

3) Получение и вывод в консоль координат трёх элементов:

const elem1 =
const elem2 =
const elem3 =
const getElem1 =
const getElem2 =
const getElem3 =
console.log(getElem1, getElem2, getElem3);

[lezo]

Як завжди, константно підтримуємо найкращій канал!