Обычно событие onscrollили scroll срабатывает при прокрутке документа или определенного html-элемента. Это событие срабатывает довольно часто, т.к. прокручивание происходит на небольшое количество пикселей, поэтому нужно понимать, что имеет смысл делать при обработке этого события.
Синтаксис
Обработку события вы можете описать таким образом:
1 2 3 4 5 | element.addEventListener("scroll", (event) => { }) element.onscroll = (event) => { } element.onscroll = function(event) { } |
Событие onscroll является одним из самых популярных событий в веб-разработке. Его используют для:
- появления элемента при прокрутке страницы
- появление меню при прокрутке, создания "липких" меню
- отображения прогресса чтения статьи
- анимаций при прокрутке страницы
- загрузки контента (infinite scroll)
- Кнопка "Наверх" (Back to top)
- Scroll-spy (подсветка текущего раздела)
Получение позиции элемента при прокрутке страницы
Часто нужно узнать, насколько пользователь прокрутил страницу.
Для этого используется свойствf объекта window window.scrollBy или window.pageYOffset.
С помощью кода ниже можно посмотреть, на сколько прокручена страница:
1 2 3 | window.addEventListener("scroll", function() { console.log("Прокрутка:", window.scrollY); }); |
Именно так реализовано исчезновение фона при скролле страницы за счет уменьшения непрозрачности линейного градиента, рассчитываемого на основе свойства window.pageYOffset.
See the Pen Responsive Background Image Fade on Scroll by HTML-plus (@ambassador)on CodePen.
Автор примера Dudley Storey
Появление элемента при прокрутке страницы
Как правило, решение этой задачи связано с 2-мя факторами:
- Сам элемент изначально скрыт с помощью свойства
opacity:0,visibility:hiddenилиdisplay: none, либо используется какой-либо класс, в котором прописано одно из этих свойств. - При прокрутке страницы мы находим позицию этого элемента с помощью свойства
element.getBoundingClientRect().topи проверяем, достигла ли эта позиция некого уровня. Лучше всего здесь привязываться к свойствуwindow.innerHeight. И в этот момент меняемopacity: 0наopacity: 1для нужного элемента, добавляя ему класс с соответствующим свойством с помощью свойстваclassListи его методаadd():
1 2 3 4 5 6 7 8 9 | const box = document.querySelector(".box"); const screenHeight = window.innerHeight; window.addEventListener("scroll", function() { const position = box.getBoundingClientRect().top; if(position < screenHeight - 100){ box.classList.add("show"); } }); |
В примере ниже блок "всплывает" как раз при отслеживании позиции элемента по отношению к размеру окна браузера.
See the Pen Block that appears on the scroll by HTML-plus (@ambassador) on CodePen.
Одним из наиболее часто встречающимся примером и заодно случаем решения этой задачи является...
Появление меню при прокрутке
В примере ниже событие onscroll используется для изменения фона для меню на полупрозрачный черный при прокрутке страницы вниз. В этом примере использованы классы фреймверка TailwindCSS для управления отображением меню.
See the Pen travelfox-tailwind by Elen (@ambassador) on CodePen.
Появление темного хэдера при скролле за счет отслеживания свойства window.scrollY и добавления класса sticky.
See the Pen Sticky Navigation Bar by Elen (@ambassador) on CodePen.
Индикатор прогресса прокрутки страницы
Такая функция часто используется в длинных статьях или блогах. И реализовать ее можно с помощью специального элемента progress, которому посвящена отдельная статья, либо с помощью div, для которого прописываются примерно такие css-свойства (фон элемента может быть любым, как вы понимаете, как и height):
1 2 3 4 5 6 7 8 | .progress{ position:fixed; top:0; left:0; height:8px; width:0; background:#1E8CBE; } |
Код на JavaScript для отслеживание прогресса заточен под то, что нам надо указывать в процентах ширину нашего div-a в зависимости от свойства window.scrollY и разницей между document.body.scrollHeight - window.innerHeight:
1 2 3 4 5 6 7 8 9 10 | window.addEventListener("scroll", function(){ const scrollTop = window.scrollY; const docHeight = document.body.scrollHeight - window.innerHeight; const percent = (scrollTop / docHeight) * 100; document.querySelector(".progress").style.width = percent + "%"; }); |
Пример вживую:
See the Pen onscroll event+progressbar by HTML-plus (@ambassador)on CodePen.
Еще один пример, реализующий прогресс просмотра/чтения страницы, но отображающийся не сверху, а сбоку в виде процентов. И заодно реализована кнопка Наверх.
See the Pen Scifi Scroll UI by Juxtopposed (@Juxtopposed) on CodePen.
Infinite Scroll - бесконечная загрузка
Infinite Scroll - это когда при прокручивании страницы догружается контент, который не может быть виден на одном экране. Таким образом осуществляется быстрая загрузка страницы и не нужно делать пагинацию, т.е. переход по страницам сайта.
Такой механизм используется в:
- социальных сетях;
- интернет-магазинах;
- новостных сайтах;
- блогах.
Принцип Infinite Scroll такой: мы отслеживаем по событию scroll достижение определенной позиции экрана (например, не доходя 5...100px до низа экрана, а потом подгружаем новую порцию контента.
1 2 3 4 5 6 7 8 9 10 | window.addEventListener("scroll", function(){ const scrollPosition = window.innerHeight + window.scrollY; const bottom = document.body.offsetHeight - 200; if(scrollPosition >= bottom){ console.log("Загрузить новый контент"); } }); |
Реальный пример можно рассмотреть на примере сервиса JSONPlaceholder, на котором можно установить лимит (параметр _limit) загружаемых фейковых постов, а также указать параметр _page, который будет позволять подгружать следующие посты при достижении низа страницы за счет такой строки кода:
1 | fetch(`https://jsonplaceholder.typicode.com/posts?_limit=${limit}&_page=${page}`) |
Пример: Infinite Scroll с подгрузкой постов с JSONPlaceholder
Код на JavaScript вы найдете на соответствующей вкладке.
See the Pen Infinite Scroll from JSONPlaceholder by HTML-plus (@ambassador) on CodePen.
Кнопка "Наверх" (Back to top)
Еще одна распространенная задача - отобразить и использовать на сайте кнопку прокрутки контента наверх. Обычно она появляется, когда пользователь уже слегка прокрутил страницу в поисках информации.
Принцип работы этой кнопки простой:
- При загрузке страницы она скрыта с помощью свойства
opacity:0,visibility:hiddenилиdisplay: none. - При прокрутке страницы (отслеживаем событие
scroll) мы показываем эту кнопку. - При клике на эту кнопку мы возвращаемся к верху страницы.
Код и реализацию на странице вы найдете ниже в примере.
See the Pen onscroll Event+To Top Button by HTML-plus (@ambassador) on CodePen.
Больше вариантов создания плавной прокрутки страницы с помощью CSS и JavaScript вы найдете в отдельной статье.
Scroll-spy (подсветка текущего раздела)
Этот эффект используется в:
- документации
- лендингах
- длинных статьях
При прокрутке подсвечивается пункт меню текущего раздела. Чаще всего он находится сбоку, но также может быть в верхнем меню (обычно в лендингах).
See the Pen Scroll-spy (подсветка текущего раздела) by HTML-plus (@ambassador) on CodePen.
Еще один подобный пример реализован на jQuery. Здесь используется событие scroll при для подсветки ссылок/отображения временной шкалы. Для корректной работы примера вам надо подключить библиотеку jQuery.
See the Pen Scroll Timeline (jQuery) by Viktor (@viktorjs) on CodePen.
Примеры обработки события onscroll
Прокрутка контента внутри <div id="scrolly">. Несмотря на то, что в примере происходит прокрутка контента внутри элемента, привязка в JS-коде осуществляется к свойству объекта window, а именно к window.scrollY.
See the Pen Scroll by Dudley Storey (@dudleystorey) on CodePen.
Реализация Sticky Header на основе jQuery. Автор Geams Parangan.
See the Pen onScroll Fixed Navigation by Larry Geams Parangan (@larrygeams) on CodePen.
Зум при скролле. Реализован с помощью jQuery. Автор Josh Ward.
See the Pen Zoom OnScroll by Josh Ward (@joshuaward) on CodePen.
Временная шкала с подсветкой при скролле от Weston.
See the Pen Timeline - Animate onScroll by Weston (@wznuk) on CodePen.
Класс Scroller, управляющий анимацией при скролле страницы. Автор Edward.
See the Pen OnScroll animation by Edward (@Edward1992) on CodePen.
Футер, появляющийся при скролле от Jon James.
See the Pen Footer Reveal onScroll by Jon James (@jonjamesdesign) on CodePen.
Очень интересная временная шкала, последовательно появляющаяся при прокрутке страницы. Автор Kenneth Aamås.
See the Pen Timeline following the scroll of the page by Kenneth Aamås (@knekk) on CodePen.
Примеры на чистом CSS
Очень интересный пример перетекания градиента при прокрутке страницы, реализованный только на CSS. Автор Gayane Gasparyan.
See the Pen Scroll with light (CSS only) by Gayane Gasparyan (@gayane-gasparyan) on CodePen.
Прохождение тени по элементу при прокрутке страницы. Автор Janos Szudi.
See the Pen MetalliC Border Box – css only shining onscroll by Janos Szudi (@szudi) on CodePen.
Оптимизация события scroll
Важно помнить: Событие scroll вызывается очень часто (десятки раз в секунду). Если внутри обработчика много сложных операций, это может замедлить страницу. Поэтому используют throttle или debounce.
Простой пример оптимизации:
1 2 3 4 5 6 7 8 9 10 11 12 13 | let timer = null; window.addEventListener("scroll", function(){ if(timer !== null){ clearTimeout(timer); } timer = setTimeout(function(){ console.log("Прокрутка завершена"); }, 200); }); |
Теперь код выполнится только после завершения прокрутки.
Иногда вместо scroll лучше применять современный API IntersectionObserver, который
- работает быстрее;
- не требует постоянных проверок;
- удобен для анимаций появления элементов.
Однако обработка события onscroll всё равно остаётся очень важным базовым инструментом, и поэтому ее часто можно встретить в коде.
Если на странице много анимаций, лучше использовать библиотеки:
Они оптимизируют обработку прокрутки и делают анимации плавными.
Вместо заключения
Событие scroll позволяет реагировать на прокрутку страницы и создавать:
- интерактивные интерфейсы
- анимации
- индикаторы прогресса
- динамическую загрузку контента
Однако при работе с ним важно помнить о производительности, так как событие может вызываться очень часто.
Полезные свойства для работы со scroll
| Свойство | Описание |
|---|---|
window.scrollY | текущая позиция прокрутки |
window.innerHeight | высота окна браузера |
document.body.scrollHeight | полная высота страницы |
element.offsetTop | расстояние элемента от верха страницы |
element.getBoundingClientRect() | позиция элемента в окне |
Бонус
Наверняка вам известно, что вы можете поменять отображение стандартной полосы прокрутки в браузере. Настройки скроллбара вы найдете в примере ниже. Используйте их при необходимости кастомизации своего сайта.
See the Pen Custom Scrollbar Maker by Stephen Paton (@stephenpaton-tech) on CodePen.
Автор примера Stephen Paton.
Код можно скопировать справа. Если сделать это сложно, кликните на кнопке 
и скопируйте код, настроив скролбар на сайте codepen.io.
