scroll-margin-inline-start

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

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

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

Попробовать

Синтаксис

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

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

Значения

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

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

Начальное значение	`0`
Применимо к	всем элементам
Наследуется	нет
Вычисленное значение	как указано
Тип анимации	по типу вычисленного значения

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

scroll-margin-inline-start = 
  <length>

Примеры

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

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

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

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-inline-start: 1rem;
}

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

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

Результат

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

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

Спецификация
CSS Scroll Snap Модуль уровня 1 # margin-longhands-logical

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

	Рабочий стол					Мобильный
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox for Android	Opera Android	Safari on IOS	Samsung Internet	WebView Android
`scroll-margin-inline-start`	69	79	68	56	15	69	68	48	15	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-inline-start