Снимок прокрутки в CSS: управление действием прокрутки

Ниже приведен небольшой отрывок из новой книги Тиффани « Мастер CSS», 2-е издание .

По мере роста веб-платформы она также приобрела функции, имитирующие нативные приложения. Одной из таких функций является CSS Scroll Snap Module. Привязка прокрутки позволяет разработчикам определить расстояние, которое интерфейс должен пройти во время действия прокрутки. Вы можете использовать его для создания слайд-шоу или постраничных интерфейсов — функций, которые в настоящее время требуют JavaScript и дорогостоящих операций DOM.

Снимок прокрутки как функция претерпел значительные изменения. В более ранней версии спецификации 2013 года, которая в то время называлась « Точки привязки прокрутки», был определен основанный на координатах и ​​пикселях подход к заданию расстояния прокрутки. Эта версия спецификации была реализована в Microsoft Edge, Internet Explorer 11 и Firefox.

Chrome 69+ и Safari 11+ реализуют последнюю версию спецификации, в которой используется модель выравнивания блоков. Это то, на чем мы сосредоточимся в этом разделе.

Предупреждение:
Многие из учебных пособий по прокрутке, которые в настоящее время распространяются по сети, основаны на более ранней спецификации CSS Scroll Snap Points . Наличие слова «точки» в названии является одним из признаков того, что учебник может опираться на старую спецификацию. Однако более надежным индикатором является наличие свойств scroll-snap-points-xscroll-snap-points-y

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

 <div class="slideshow">
  <img src="avocado-and-bacon-salad.jpg" alt="avocado and bacon salad">
  <img src="salad-eggs-and-scallops.jpg" alt="salad topped with hard boiled eggs and seared scallops">
  <img src="seafood-and-noodles.jpg" alt="seafood stew over noodles">
  <img src="grilled-salmon-and-side-salad.jpg" alt="grilled salmon steak with avocado and side salad">
  <img src="avocado-toast-with-egg.jpg" alt="avocado toast with egg">
</div>

Это все, что нам нужно. Нам не нужно иметь внешний упаковочный элемент и внутренний скользящий контейнер. Нам также не нужен JavaScript.

Теперь для нашего CSS:

 * {
   box-sizing: border-box;
}

html, body {
    padding: 0; 
    margin: 0;
}

.slideshow {
  scroll-snap-type: x mandatory; /* Indicates scroll axis and behavior */
  overflow-x: auto;              /* Should be either `scroll` or `auto` */
  display: flex;
  height: 100vh;
}

.slideshow img {
  width: 100vw;
  height: 100vh;
  scroll-snap-align: center;
}

Добавление scroll-snap-type.slideshow Значение для этого свойства, x mandatoryстрогость привязки при прокрутке . В этом случае mandatoryдолжен привязываться к позиции привязки, когда нет активной операции прокрутки. Использование display: flex

Теперь нам нужно другое свойство — scroll-snap-align Это свойство указывает, как выровнять область привязки прокрутки каждого изображения в порту привязки контейнера прокрутки. Он принимает три значения: startendcenter В этом случае мы использовали center

Более подробный обзор Scroll Snap можно найти в разделе « Хорошо управляемая прокрутка с помощью CSS Scroll Snap» в руководстве Google Web Fundamentals.