Прокрутка - CSS-хитрости

Anonim

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

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

Хорошо, переходим к прокрутке

scroll-paddingиспользуется для настройки оптимальной области просмотра контейнера привязки. Это полезно, если в контейнере есть такие элементы, как фиксированный заголовок, который закрывает элементы внутри, или если для прокручиваемого контейнера требуется некоторое пространство, чтобы дать внутренним элементам пространство для дыхания после того, как они были «защелкнуты» на месте.

Простой пример можно использовать scroll-paddingдля создания некоторого фиксированного интервала 50pxвверху и слева от контейнера:

.scroll-container ( scroll-padding: 50px 0 0 50px; )
Области розового цвета показывают заполнение прокрутки на контейнере привязки прокрутки.

Синтаксис

/* Shorthand */ scroll-padding: ( | auto )(1,4); /* Longhands */ scroll-padding-top: | auto; scroll-padding-right: | auto; scroll-padding-bottom: | auto; scroll-padding-left: | auto; /* inline-specific and block-specific properties as well */ scroll-padding-block: ( | auto )(1,2); scroll-padding-inline: ( | auto )(1,2);

Важное примечание по поводу длинных букв: в настоящее время Chrome не поддерживает форматирование scroll-paddingи scroll-marginсвойства от руки . Используйте сокращение для максимальной поддержки браузером. См. Эту проблему на трекере ошибок хрома для получения дополнительных сведений и текущего статуса.

Значения

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

  • autoоставляет заполнение, определяемое браузером / пользовательским агентом. Обычно это означает значение 0 пикселей, но может быть ненулевым, если пользовательский агент решит, что другое значение более подходящее.
  • написано , похожие на paddingи другие свойства , где значение может быть определено с единицами ( px, em, vhи т.д.) или как процент от самого контейнера.

Пример

См. Пример прокрутки пера с
помощью 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

Связанный

  • scroll-snap-type
  • scroll-margin
  • scroll-snap-align
  • scroll-snap-stop

Ресурсы

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