Прокрутка-прив'язка-зупинка - 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 змусить браузер прив'язатись до цього елемента, навіть якщо прокрутка зазвичай проходила повз цей елемент

Приклад

Див. Приклад ручки прокрутки-миттєвої зупинки
від CSS-Tricks (@ css-tricks) на CodePen.

Підтримка браузера

Дані про підтримку веб-переглядача подані компанією Caniuse, яка містить більше деталей. Цифра вказує на те, що браузер підтримує цю функцію на цій версії та вище.

Робочий стіл

Chrome Firefox 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

Ресурси

  • Рекомендація кандидата у програму CS3 Scroll Snap
  • Практичне прив'язування прокрутки CSS
  • Представляємо точки прив'язки CSS Scroll