В этом тренажере вы научитесь управлять прокруткой страницы с помощью JavaScript. Вы будете работать с различными свойствами и методами объекта `window` и элементами DOM, чтобы программно изменять положение прокрутки, плавно перемещаться к определенным элементам, а также отслеживать текущее положение прокрутки. Задания охватывают как базовые, так и более продвинутые техники, позволяя вам закрепить знания на практике. Вы будете изменять положение скролла, создавать плавную прокрутку, работать с событиями и многое другое. Помните, что все действия происходят в ограниченном пространстве: ширина максимум 372px, а высота минимум 300px.
- Модуль 1: Основы выбора элементов
- Выбор элемента по ID.
- Выбор элементов по классу.
- Выбор элементов по тегу.
- Выбор по селектору CSS.
- Выбор по атрибуту.
- Поиск элементов внутри другого элемента.
- Поиск родительского элемента.
- Поиск соседних элементов (предыдущий, следующий).
- Поиск первого и последнего дочернего элемента.
- Поиск всех дочерних элементов.
- Модуль 2: Манипуляция содержимым
- Модуль 3: Работа с атрибутами
- Модуль 4: Управление классами
- Модуль 5: Управление стилями
- Модуль 6: Создание и удаление элементов
- Создание нового элемента.
- Вставка элемента перед другим элементом.
- Вставка элемента после другого элемента.
- Добавление элемента в определенную позицию внутри списка дочерних элементов.
- Удаление элемента из DOM.
- Замена одного элемента другим.
- Перемещение существующего элемента в другое место DOM..
- Очистка содержимого элемента без его удаления.
- Модуль 7: Обработка событий
- Модуль 8: Работа с формами
- Модуль 9: Продвинутые манипуляции
- Модуль 10: Работа с размерами и прокруткой
- Получение размеров элемента.
- Получение позиции элемента относительно окна браузера.
- Получение позиции элемента относительно родительского элемента.
- Управление прокруткой страницы.
- Определение, виден ли элемент в текущей области просмотра.
- Плавная прокрутка к элементу.
- Создание элемента, который фиксируется при прокрутке.
- Модуль 11: Работа с медиа-элементами
- Модуль 12: Практические задания
Прокрутка в начало страницы
Создайте функцию, которая прокручивает страницу в самое начало. Используйте объект `window` для изменения положения прокрутки. Страница должна быть прокручена в верхнюю левую точку.
<div style="height: 2000px;">Длинный контент</div>function scrollToTop() {
input__1.scrollTo(input__2, input__3);
}
scrollToTop();Прокрутка на 500 пикселей вниз
Напишите код, который прокручивает страницу вниз на 500 пикселей от текущего положения. Используйте свойства `window.scrollX` и `window.scrollY` для получения текущего положения прокрутки.
<div style="height: 2000px;">Длинный контент</div>window.scrollTo(window.input__1, window.input__2 + input__3);Плавная прокрутка в начало страницы
Измените код из первого задания так, чтобы прокрутка в начало страницы была плавной. Используйте опцию `behavior` метода `scrollTo`.
<div style="height: 2000px;">Длинный контент</div>function scrollToTop() {
window.scrollTo({
top: input__1,
left: 0,
behavior: input__2
});
}
scrollToTop();Прокрутка к элементу по ID
Создайте функцию, которая прокручивает страницу к элементу с ID "targetElement". Используйте метод `scrollIntoView()` для этого элемента.
<div style="height: 500px;"></div>
<div id="targetElement">Целевой элемент</div>
<div style="height: 1500px;"></div>function scrollToElement() {
const element = document.input__1("targetElement");
element.input__2();
}
scrollToElement();Плавная прокрутка к элементу
Добавьте плавную прокрутку к предыдущему заданию, используя опцию `behavior` метода `scrollIntoView()`.
<div style="height: 500px;"></div>
<div id="targetElement">Целевой элемент</div>
<div style="height: 1500px;"></div>function scrollToElement() {
const element = document.getElementById("targetElement");
element.scrollIntoView({ input__1: input__2 });
}
scrollToElement();Отслеживание события прокрутки
Добавьте обработчик события `scroll` к объекту `window`. Внутри обработчика выведите в консоль текущую Y-координату прокрутки (`window.scrollY`).
<div style="height: 2000px;">Длинный контент</div>window.addEventListener(input__1, function() {
console.log(input__2.input__3);
});Прокрутка к элементу с учетом отступа
Измените функцию `scrollToElement` из задания 4 так, чтобы прокрутка останавливалась на 100 пикселей выше целевого элемента. Используйте метод getBoundingClientRect()
<div style="height: 500px;"></div>
<div id="targetElement">Целевой элемент</div>
<div style="height: 1500px;"></div>function scrollToElement() {
const element = document.getElementById("targetElement");
const y = element.input__1().top + window.input__2 - input__3;
window.scrollTo(0, y);
}
scrollToElement();Прокрутка на определенное количество пикселей относительно элемента
Напишите функцию, которая прокручивает страницу на 200 пикселей вниз относительно текущего положения элемента с id="myDiv".
<div style="height: 500px;"></div>
<div id="myDiv" style="margin-top: 200px;">Мой элемент</div>
<div style="height: 1500px;"></div>function scrollRelativeToElement() {
const element = document.getElementById(input__1);
const offset = element.getBoundingClientRect().top + input__2;
window.scrollBy(0, offset);
}
scrollRelativeToElement();Прокрутка до определенной секции
Имеется несколько секций на странице, каждая с уникальным id. Напишите функцию scroll, которая принимает id секции в качестве аргумента и прокручивает страницу до этой секции. Добавьте плавность.
section { border: 1px solid black; padding: 20px; }<div style="height: 500px;"></div> <section id="section1">Секция 1</section> <div style="height: 500px;"></div> <section id="section2">Секция 2</section> <div style="height: 500px;"></div> <section id="section3">Секция 3</section> <div style="height: 500px;"></div>function scroll(sectionId) {
const element = document.input__1(input__2);
element.input__3({ behavior: "smooth" });
}
scroll("section2");