scroll-margin

Базовая Широко поддерживается

Эта функция хорошо поддерживается и работает на многих устройствах и версиях браузеров. Она доступна в браузерах с января 2020 года.

Свойство scroll-margin сокращённой записи задаёт все отступы области прокрутки элемента сразу, присваивая значения так же, как свойство margin делает для отступов элемента.

Попробуйте

Составные свойства

Это свойство является сокращением следующих свойств CSS:

Синтаксис

/* <length> values */
scroll-margin: 10px;
scroll-margin: 1em 0.5em 1em 1em;

/* Global values */
scroll-margin: inherit;
scroll-margin: initial;
scroll-margin: revert;
scroll-margin: revert-layer;
scroll-margin: unset;

Значения

<length>: Отступ от соответствующего края контейнера прокрутки.

Описание

Вы можете увидеть эффект scroll-margin при прокрутке до точки, находящейся между двумя «страницами» содержимого примера. Значение, заданное для scroll-margin определяет, сколько страницы, которая в основном находится за пределами snapport, должно остаться видимым.

Таким образом, значения scroll-margin представляют отступы, определяющие область прокрутки, которая используется для привязки этого блока к snapport. Область прокрутки определяется путем взятия преобразованного фрейма элемента, поиска его прямоугольной области (выровненной по осям в координатном пространстве контейнера прокрутки), а затем добавления указанных отступов.

Формальное определение

Начальное значение	как каждое из свойств сокращённой записи: `scroll-margin-bottom`: `0` `scroll-margin-left`: `0` `scroll-margin-right`: `0` `scroll-margin-top`: `0`
Применимо к	всем элементам
Наследуется	нет
Вычисленное значение	как каждое из свойств сокращённой записи: `scroll-margin-bottom`: как указано `scroll-margin-left`: как указано `scroll-margin-right`: как указано `scroll-margin-top`: как указано
Тип анимации	по типу вычисленного значения

Формальный синтаксис

scroll-margin = 
  <length>{1,4}

Примеры

Простой пример

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

Здесь цель состоит в том, чтобы создать четыре горизонтально прокручивающихся блока, второй и третий из которых «прилипают» к левой части каждого блока, но не совсем.

HTML

HTML, представляющий блоки, очень прост:

<div class="scroller">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</div>

CSS

Давайте рассмотрим CSS. Внешний контейнер стилизован следующим образом:

.scroller {
  text-align: left;
  width: 250px;
  height: 250px;
  overflow-x: scroll;
  display: flex;
  box-sizing: border-box;
  border: 1px solid #000;
  scroll-snap-type: x mandatory;
}

Основные части, относящиеся к «прилипанию» при прокрутке, это overflow-x: scroll, что гарантирует, что содержимое будет прокручиваться, а не скрываться, и scroll-snap-type: x mandatory, которое определяет, что «прилипание» при прокрутке должно происходить по горизонтали, и прокрутка всегда будет останавливаться на точке «прилипания».

Элементы-потомки стилизованы следующим образом:

.scroller > div {
  flex: 0 0 250px;
  width: 250px;
  background-color: #663399;
  color: #fff;
  font-size: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  scroll-snap-align: start;
}

.scroller > div:nth-child(2n) {
  background-color: #fff;
  color: #663399;
}

Наиболее важная часть здесь — scroll-snap-align: start, которая указывает, что левые края (начало по оси x в нашем случае) являются назначенными точками «прилипания».

И, наконец, мы определяем значения отступов прокрутки, разные для второго и третьего элементов-потомков:

.scroller > div:nth-child(2) {
  scroll-margin: 1rem;
}

.scroller > div:nth-child(3) {
  scroll-margin: 2rem;
}

Это означает, что при прокрутке мимо средних элементов-потомков прокрутка «прилипнет» к 1rem за пределами левого края второго <div>, и 2rems за пределами левого края третьего <div>.

Примечание: Здесь мы устанавливаем scroll-margin со всех сторон одновременно, но только левое начало (начало по оси X) действительно важно. Здесь можно установить отступ прокрутки только для левого края, например, с помощью scroll-margin-inline-start: 1rem, или scroll-margin: 0 0 0 1rem.

Результат

Попробуйте сами:

Спецификации

Спецификация
Модуль CSS Scroll Snap Level 1 # scroll-margin

Совместимость с браузерами

	Рабочий стол					Мобильные устройства
	Chrome	Edge	Firefox	Opera	Safari	Chrome для Android	Firefox для Android	Opera для Android	Safari на iOS	Samsung Internet	WebView Android
`scroll-margin`	69	79	90 68–90 Свойство `scroll-margin` может привести к неправильному расчёту видимости элемента для `element.focus()`. См. ошибку 1708303.	56	14.1 11 До версии 14.1 отступ прокрутки не применяется для прокрутки к фрагменту цели или `scrollIntoView()`, см. ошибку 189265.	69	90 68–90 Свойство `scroll-margin` может привести к неправильному расчёту видимости элемента для `element.focus()`. См. ошибку 1708303.	48	14.5 11 До версии 14.5 отступ прокрутки не применяется для прокрутки к фрагменту цели или `scrollIntoView()`, см. ошибку 189265.	10.0	69

См. также

© 2005–2024 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-margin