В недавно обновленной стабильной версии Chrome 69 полностью поддерживается стандарт CSS Scroll Snap. Этот стандарт используется для установки точки привязки прокрутки, чтобы конечная позиция прокрутки была привязана к ближайшей точке привязки или определенному типу для достижения лучшего качества прокрутки. Сегодня мы будем его изучать.
Поддержка браузера
что такое захват
Студенты, которые изучали программное обеспечение серии CAD, могут очень хорошо знать, что когда мы перемещаем объект, он всегда может быть автоматически прикреплен к линии сетки, так что объект может попасть только в определенное положение на сетке, что является привязкой к сетке. Или скажем так, на обычной мерной линейке оговорено, что ваша кисть может попасть только на шкалы 1мм и 2мм, но не между ними.
Что такое захват прокрутки
Захват прокрутки, то есть захват положения прокрутки при прокрутке. Давайте сначала рассмотрим два примера, предоставленных W3C:
Пример 1. Использование серии изображений, сложенных по горизонтали.прокручиваемый контейнеробразуют альбомоподобный контейнер в , а при использовании захвата положения на основе элементов положение изображения в конце прокрутки всегда будет находиться в центре области просмотра прокрутки.
img {
/* 指定每张图片的捕捉位置与滚动容器可视区域 x 轴中心的位置对齐 */
scroll-snap-align: none center;
}
.photoGallery {
width: 500px;
overflow-x: auto;
overflow-y: hidden;
white-space: nowrap;
/* 要求每次滚动的结束的位置精确地落在捕捉点上 */
scroll-snap-type: x mandatory;
}
<div class="photoGallery">
<img src="img1.jpg">
<img src="img2.jpg">
<img src="img3.jpg">
<img src="img4.jpg">
<img src="img5.jpg">
</div>
Красная область на рисунке — это видимая область или область просмотра прокручиваемого контейнера. Место в желтой рамке картинки называется областью захвата. Scroll-snap-align, который мы установили выше, указывает точку привязки горизонтальной оси в качестве центральной позиции. Точка привязки формируется в центре области окна привязки (красная пунктирная линия) и в центре области привязки (желтая пунктирная линия).
Пример 2. В этом примере положение прокрутки документа с разбивкой на страницы привязано к тому месту, где каждая страница документа находится рядом с контейнером прокрутки. Эта неточная привязка позволяет концу предыдущей страницы документов появиться рядом с точкой привязки (краем контейнера), создавая у пользователя эффект, что он еще не достиг самого верха всех документов. А использование неточной привязки позволяет пользователю в любой момент остановиться в середине прокрутки, не заставляя положение прокрутки «исправлять» до точки привязки, как при точной привязке. Однако при использовании неточной привязки, если конечная точка прокрутки уже находится рядом с точкой привязки, браузер изменит конечную точку прокрутки, чтобы она находилась в указанной точке привязки.
.page {
/* 指定每一页文档的顶部为捕捉的位置 */
scroll-snap-align: start none;
}
.docScroller {
width: 500px;
overflow-x: hidden;
overflow-y: auto;
/* 指定捕捉视口应有 100px 的上内边距 */
scroll-padding: 100px 0 0;
/* 使用非精确捕捉，能允许滚动最终停止在捕捉点的附近而不需要进一步的调整 */
scroll-snap-type: y proximity;
}
<div class="docScroller">
<div class="page">Page 1</div>
<div class="page">Page 2</div>
<div class="page">Page 3</div>
<div class="page">Page 4</div>
</div>
Как показано на рисунке выше, первым шагом является определение области просмотра захвата.Из-за использования прокрутки, наша область просмотра захвата находится на расстоянии 100 пикселей от видимой области прокрутки, а захват области захвата определяется с помощью scroll-snap-align. Точка, где начинается вертикальная ось региона
Ну и подведем итог, мы уже знаем, что для формирования захвата необходимы следующие условия:
- прокручиваемая область
- Определяет точку привязки для видового экрана привязки и области привязки
Затем давайте возьмем приведенный выше пример, чтобы медленно понять несколько свойств, которые управляют этими параметрами.
Захват элементов управления, связанных с окном просмотра
scroll-snap-type
Установив тип привязки прокрутки Контейнер прокрутки превращается в контейнер прокрутки привязки, и можно контролировать строгость привязки.Если строгость не указана, по умолчанию используется неточная привязка (близость).
scroll-snap-type поддерживает установку двух параметров, первый — ось привязки, а второй параметр — строгость привязки, которую можно не указывать.
Захват осевой
Оси привязки имеют значения x, y, block, inline и оба значения.
x: привязка влияет на направление оси X привязки видового экрана
y: привязка влияет на направление оси Y окна просмотра привязки.
блок: привязка влияет на направление оси блока
встроенный: захват влияет на направление оси линии
оба: Snap влияет на все направления отдельно
захватить строгость
нет: нет захвата
обязательно: точный захват
близость: неточный захват
Например:
html {
scroll-snap-type: y mandatory;
}
В привязке прокрутки документа область просмотра привязки привязывается к направлению оси Y.
scroll-padding
scroll-padding определяет отступ между областью просмотра привязки и контейнером прокрутки, что позволяет разработчикам лучше контролировать область привязки. Параметры scroll-padding такие же, как наши обычные параметры заполнения, и есть также такие свойства, как scroll-padding-top, которые совпадают с padding.
Элементы управления, связанные с областью привязки
scroll-margin
scroll-margin определяет границу между областью захвата и элементом захвата. Например, если вы установите scroll-margin: 20px; для области привязки, то фактическая область привязки будет больше, чем размер элемента привязки. Параметры scroll-margin такие же, как наши общие параметры полей, а также имеют свойства, такие как scroll-margin-top, которые совпадают с полями.
scroll-snap-align
Свойство scroll-snap-align задает область прокрутки и положение привязки окна просмотра привязки и служит в качестве положения выравнивания всех областей привязки относительно окна просмотра привязки. Например, если для scroll-snap-align установлено значение center, положение привязки области прокрутки находится в центре, а положение привязки области просмотра привязки — центральное положение направления, указанного в scroll-snap-type.
scroll-snap-align может установить выравнивание привязки по осям x, y или по линиям и блокам соответственно. Если второй параметр опущен, значения в направлениях x и y являются значениями, указанными первым параметром.
scroll-snap-type может иметь следующие значения свойств:
нет: не определено
start: начальная позиция выравнивания
end: конечная позиция выравнивания
center: Выровнять центральное положение
Например:
.item {
scroll-snap-align: none start;
}
резюме
Из приведенного выше примера мы можем ясно видеть, что функция CSS Scroll Snap используется для хорошего управления положением конца прокрутки, и контент, который пользователь хочет видеть, отображается немедленно. В настоящее время только некоторые браузеры полностью поддерживают последний стандарт CSS Scroll Snap, и мы надеемся, что другие крупные производители присоединятся к нам.
Спасибо
Спасибо Лю Гуаньюй за исправление статьи и предложения по названию, и спасибо Хуан Сяолу за исправление статьи.