Интуитивно понятные интерфейсы прокрутки с помощью CSS Scroll Snap Points

Точки прокрутки — это встроенный метод CSS, который вы можете использовать для создания макетов, в которых ваш контент легко прокручивается или перемещается. С помощью этой новой функции вы можете легко контролировать, как ваш контент будет прокручиваться и как он будет «привязываться» к нужным местам (что позволяет вам легко создавать такие функции, как нумерация страниц).

Исторически разработчики использовали JavaScript (часто jQuery) для создания идеальных интерфейсов с плавной прокруткой. Хотя они прекрасно работают, всегда лучше иметь собственный подход CSS, который по сути делает то же самое.

Спецификация для Snap Points все еще относительно новая (и находится в стадии разработки); однако он поддерживается несколькими браузерами и достаточно стабилен, чтобы мы могли поиграться с ним.

Обзор Snap Points

Прокрутка точки привязки работает путем определения элемента контейнера прокрутки, а затем установки каждого из его внутренних элементов в точки привязки. После того, как эти элементы были установлены, обычная прокрутка будет изменена таким образом, чтобы при прокрутке / панорамировании пользователи переходили из одной точки привязки в другую.

Основной элемент, содержащий все остальные элементы, которые вы хотите прокрутить, называется контейнером прокрутки . Это наш основной элемент, и большинство свойств, связанных с привязкой, будут установлены здесь. Мы можем определить:

• Насколько высоким / широким будет контейнер
• По какой оси / осям будет прокручиваться контейнер (то есть X, Y или оба)
• Прочность защелкивающихся элементов и то, как они будут реагировать на прокрутку
• Позиции / смещения от контейнера к элементам привязки при прокрутке

Элементы внутри контейнера прокрутки станут нашими «точками привязки». Именно этот контент будет прокручиваться / панорамироваться, когда мы взаимодействуем с контейнером. Для отдельной точки привязки вы определите:

• Смещение текущего элемента привязки к контейнеру прокрутки.

Свойства точек прокрутки

Получение Snap Points для работы в ваших проектах требует только нескольких CSS-свойств. Давайте изложим их ниже, а затем позже, когда рассмотрим несколько примеров, демонстрирующих их работу.

scroll-snap-destination

Это свойство устанавливается в контейнере прокрутки и определяет значения положения X и положения Y (относительно себя), к которым привязываются элементы внутри. Вы используете это свойство, чтобы сообщить контейнеру, куда именно будут привязаны его элементы.

Вот возможные значения:

• unset
• position
  • Значение может быть в пикселях, таких как scroll-snap-destination: 50px 100px; что говорит браузеру, что он будет привязывать элементы от 50 пикселей слева и 100 пикселей сверху.
  • Значение может быть набором процентов, таких как scroll-snap-destination: 0% 100%; который сообщает браузеру, что он будет привязывать элементы от 0% слева и 100% сверху.
  • Значением также могут быть другие разрешенные единицы, такие как scroll-snap-destination: 0vw 50vw

Давайте рассмотрим несколько наглядных пособий, чтобы вы могли увидеть, как работает это свойство (так как это одно из тех свойств, которые вам нужно будет отрегулировать, пока вы не получите правильный эффект).

назначение прокрутки-привязки: 0% 0%
Установка места назначения прокрутки на 0% обеспечит привязку всех внутренних элементов к переднему левому краю контейнера.