scroll-margin-inline-end

Базовая Широко доступная

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

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

Попробовать

Синтаксис

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

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

Значения

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

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

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

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

scroll-margin-inline-end = 
  <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: end;
}

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

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

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

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

.scroller > div:nth-child(3) {
  scroll-margin-inline-end: 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 на IOS	Samsung Internet	WebView Android
`scroll-margin-inline-end`	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-end