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

Anonim

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

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

Введите поле прокрутки

scroll-marginиспользуется для настройки области привязки элемента (поле, определяющее место привязки элемента). Добавление scroll-marginполезно, когда вам нужно дать элементу пространство от края контейнера, когда он вставлен на место, но допускает ситуации, когда каждому элементу может потребоваться немного другой интервал. Если все элементы имеют одинаковые требования к интервалу, рассмотрите возможность использования scroll-paddingв родительском контейнере вместо этого, scroll-marginпотому что это влияет на интервал для всех элементов внутри контейнера.

Простой пример, в котором scroll-marginдопускается интервал 50 пикселей вокруг верхнего и левого края элемента, выглядит следующим образом:

.scroll-element ( scroll-margin: 50px 0 0 50px; )
Розовая область представляет собой значок scroll-marginна этом элементе.

Синтаксис

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

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

Значения

scroll-marginпринимает следующую длину значение, которое записывается аналогична marginи других свойств , где значение может быть определено с единицами ( px, em, vhи т.д.). Дополнительную информацию см. В Модуле значений и единиц W3C. Проценты не могут использоваться в scroll-marginсоответствии со спецификацией.

Пример

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