Узнайте, как сделать привязку прокрутки к определенным точкам с помощью CSS Scroll Snap.
CSS Scroll Snap позволяет настраивать прокрутку, задавая точки, в которых должна перемещаться позиция прокрутки («точки привязки»).
Вы можете использовать это свойство для создания эффектов, которые в противном случае потребовали бы большого количества JavaScript (часто с плохими результатами).
Основная идея состоит в том, чтобы иметь родительский элемент с прокручиваемым содержимым и списком дочерних элементов (или разделов), в которые должна перемещаться прокрутка.
.parent {
// the parent needs to have scrollable content
height: 100vh;
overflow: auto;
// set scroll snap
// y = y-axis; mandatory = scrolling is forced to the next point
scroll-snap-type: y mandatory;
// alternative options
// x = x-axis; proximity = snapping is triggered by getting close to the snap point
scroll-snap-type: x proximity;
}
Вот пример:
Вот и всё!
Ссылка на автора - twitter.com/guerriero_se !
