scroll-margin-inline

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

• scroll-margin-inline-end
• scroll-margin-inline-start

<length>

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

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

scroll-margin-inline = 
  <length>{1,2}  

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

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

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

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

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

Результат

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

• CSS прилипание при прокрутке
• Хорошо управляемая прокрутка с помощью CSS прилипания при прокрутке