Остановка прокрутки - CSS-хитрости

Anonim

scroll-snap-stopявляется частью модуля CSS Scroll Snap. Привязка к прокрутке относится к «привязке» позиции области просмотра к определенным элементам на странице при прокрутке окна (или прокручиваемого контейнера). Контейнер с привязкой к прокрутке можно представить себе как наложение магнита на элемент, который прилипает к верхней части области просмотра и заставляет страницу перестать прокручиваться прямо здесь.

scroll-snap-stopявляется необязательным свойством для элемента с привязкой к прокрутке в контейнере с привязкой к прокрутке. Для получения дополнительной информации о контейнерах с привязкой к прокрутке см. scroll-snap-typeЗапись в альманахе.

scroll-snap-stopпозволяет принудительно привязать контейнер с привязкой к конкретному элементу. Предположим, вы выполняете прокрутку в контейнере с привязкой к прокрутке и запускаете гигантское вращение колесика мыши. Обычно браузер позволяет скорости вашей прокрутки пролетать мимо точек привязки, пока она не остановится на точке привязки, близкой к тому месту, где обычно заканчивается прокрутка. Путем настройки scroll-snap-stopвы можете указать браузеру, что он должен остановиться на определенном элементе, прежде чем позволить пользователю пройти мимо него.

/* Assuming this element is a child of a container with `scroll-snap-type` set */ .element ( scroll-snap-stop: always; )

Синтаксис

scroll-snap-stop: normal | always;

Значения

scroll-snap-stop принимает следующие значения:

  • normal является значением по умолчанию и позволяет прокручивать элемент без привязки
  • always заставит браузер привязаться к этому элементу, даже если прокрутка обычно проходит мимо этого элемента

Пример

См. Пример Pen scroll-snap-stop
от CSS-Tricks (@ css-tricks) на CodePen.

Поддержка браузера

Эти данные о поддержке браузером взяты из Caniuse, где есть более подробная информация. Число означает, что браузер поддерживает эту функцию в этой версии и выше.

Рабочий стол

Хром Fire Fox IE Край Сафари
69 68 11 * 79 11

Мобильный / планшет

Android Chrome Android Firefox Android iOS Safari
88 85 81 год 11,0-11,2

Обратите внимание, что Chrome scroll-snap-stop: always;на данный момент может не поддерживать .

Связанный

  • scroll-snap-type
  • scroll-margin
  • scroll-padding
  • scroll-snap-align

Ресурсы

  • CSS Scroll Snap - кандидат в рекомендации W3C
  • Практическая привязка прокрутки CSS
  • Введение в точки привязки прокрутки CSS