Что такое CSS Scroll Snap CSS Scroll Snap

Узнайте, как сделать привязку прокрутки к определенным точкам с помощью 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;
}

Вот пример:

Вот и всё!


Top

🔖 Выбор по тегам ×

💌 Написать сообщение ×

Все поля обязательны для заполнения!