23 июля 2024г. рабочая группа CSS опубликовала первый публичный рабочий проект CSS Scroll Snap Module Level 2. Этот модуль содержит функции для управления панорамированием и прокруткой с помощью "позиций привязки".
CSS Scroll Snap Module Level 2 – это передовой инструмент, который призван улучшить пользовательский опыт при прокрутке веб-страниц. Рассмотрим, что представляет из себя этот модуль и какие нововведения он принесет в мир веб-разработки.
CSS Scroll Snap Module Level 2 - это спецификация, разработанная W3C, позволяющая веб-разработчикам создавать плавные и привлекательные скроллинговые эффекты на веб-страницах. Этот модуль дополняет существующие CSS-свойства для работы с прокруткой страницы, делая ее более интерактивной.
CSS Scroll Snap Module Level 2 предлагает несколько ключевых возможностей. Среди них:
CSS Scroll Snap Module Level 2 значительно улучшает пользовательский опыт, делая навигацию по сайту проще и удобнее. Для разработчиков это означает увеличение функциональности веб-страниц и создание более интерактивных интерфейсов без необходимости использования сложных скриптов.
Пример 1
Карусель, которая начинается с прокрутки до среднего изображения:
.carousel {
overflow-inline: auto;
}
.carousel .origin {
scroll-start-target: auto;
}
<div class="carousel">
<img src="img1.jpg">
<img src="img2.jpg">
<img src="img3.jpg" class="origin">
<img src="img4.jpg">
<img src="img5.jpg">
</div>
Пример 2
Строка поиска становится доступной, когда пользователь прокручивает страницу обратно наверх:
.scrollport {
overflow-block: auto;
}
main {
scroll-start-target: auto;
}
<div class="scrollport">
<nav>
...
</nav>
<main>
...
</main>
</div>
CSS Scroll Snap Module Level 2 открывает новые возможности для веб-разработчиков, позволяя им создавать более интерактивные и привлекательные веб-страницы. Имея в виду растущий спрос на динамичные пользовательские интерфейсы, этот модуль становится важным инструментом в арсенале современных веб-разработчиков.