CSS3 | Прокрутка элементов
Прокрутка элементов
Последнее обновление: 21.04.2016
Нередко при создании веб-страниц можно столкнуться с ситуацией, когда содержимое блока занимает гораздо больше места, чем сам определено шириной и высотой блока. В этой ситуации по умолчанию браузер все равно отображает содержимое, даже если оно выходит за границы блока.
Однако свойство overflow позволяет настроить поведение блока в подобной ситуации и добавить возможность прокрутки. Это свойство может принимать следующие значения:
auto: если контент выходит за границы блока, то создается прокрутка. В остальных случаях полосы прокрутки не отображаютсяhidden: отображается только видимая часть контента. Контент, который выходит за границы блока, не отображается, а полосы прокрутки не создаютсяscroll: в блоке отображаются полосы прокрутки, даже если контент весь помещается в границах блока, и таких полос прокрутки не требуетсяvisible: значение по умолчанию, контент отображается, даже если он выходит за границы блока
Рассмотрим применение двух значений:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Прокрутка в CSS3</title>
<style>
.article1{
width: 300px;
height: 150px;
margin:15px;
border: 1px solid #ccc;
overflow: auto;
}
.article2{
width: 300px;
height: 150px;
margin:15px;
border: 1px solid #ccc;
overflow: hidden;
}
</style>
</head>
<body>
<div>
<p>Старый дуб, весь преображенный, раскинувшись шатром сочной, темной зелени, млел, чуть
колыхаясь в лучах вечернего солнца. Ни корявых пальцев, ни болячек, ни старого недоверия и
горя – ничего не было видно.
Да, это тот самый дуб», – подумал князь
Андрей, и на него вдруг нашло беспричинное весеннее чувство радости и обновления.</p>
</div>
<div>
<p>Старый дуб, весь преображенный, раскинувшись шатром сочной, темной зелени, млел, чуть
колыхаясь в лучах вечернего солнца. Ни корявых пальцев, ни болячек, ни старого недоверия и
горя – ничего не было видно. Да, это тот самый дуб», – подумал князь
Андрей, и на него вдруг нашло беспричинное весеннее чувство радости и обновления.</p>
</div>
</body>
</html>
Свойство overflow управляет полосами прокрутки как по вертикали, так и по горизонтали. С помощью дополнительных свойств
overflow-x и overflow-y можно определить прокрутку соответственно по горизонтали и по вертикали. Данные свойства
принимают те же значения, что и overflow:
overflow-x: auto; overflow-y: hidden;
Как сделать полосу прокрутки
Узнайте, как создать пользовательскую полосу прокрутки с помощью CSS.
Настраиваемые полосы прокрутки
Настраиваемые полосы прокрутки не поддерживаются в Firefox или IE/Edge.
Создание пользовательских полос прокрутки
Браузеры WebKit, такие как Chrome, Safari и Opera, поддерживают нестандартные ::-webkit-scrollbar псевдо-элементы, что позволяет нам изменять внешний вид полосы прокрутки браузера.
В следующем примере создается тонкая полоса прокрутки (10px Wide), которая имеет серый цвет дорожки/полосы и темно-серый (#888) дескриптор:
Пример
/* width */::-webkit-scrollbar {
width: 10px;
}
/* Track */
::-webkit-scrollbar-track {
}
/* Handle */
::-webkit-scrollbar-thumb {
background: #888;
}
/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
background: #555;
}
В этом примере создается полоса прокрутки с тенью поля:
Пример
/* width */::-webkit-scrollbar {
width: 20px;
}
/* Track */
::-webkit-scrollbar-track {
box-shadow: inset 0 0 5px
grey;
border-radius: 10px;
}
/* Handle */
::-webkit-scrollbar-thumb {
background: red;
border-radius: 10px;
}
Селекторы полосы прокрутки
Для браузеров WebKit можно использовать следующие псевдо-элементы для настройки полосы прокрутки браузера:
::-webkit-scrollbarполоса прокрутки::-webkit-scrollbar-buttonкнопки на полосе прокрутки (стрелки, указывающие вверх и вниз).::-webkit-scrollbar-thumbПеретаскивание маркера прокрутки.::-webkit-scrollbar-trackдорожка (индикатор выполнения) полосы прокрутки.::-webkit-scrollbar-track-pieceдорожка (индикатор выполнения) не покрывается ручкой.::-webkit-scrollbar-cornerнижний угол полосы прокрутки, где встречаются как горизонтальные, так и veritcal полосы прокрутки.::-webkit-resizerПеретаскивание маркера изменения размера, который отображается в нижнем углу некоторых элементов.
Как стилизовать полосы прокрутки (скроллинг) в Webkit-браузерах
Начиная с Internet Explorer 5.5 версии, которая была выпущена в июле 2000 года, вы можете стилизовать цвета и размеры полос прокрутки вашего браузера. Совсем недавно браузеры на основе Webkit, догнали IE и теперь позволяют сделать еще более сложную индивидуализацию скроллинга. Теперь их возможности не ограничиваются просто изменением цвета.
Цвет, Ширина, Границы
Существует множество псевдо-элементов для настройки различных компонентов скроллинга. Так же, как и в любом простом элементе HTML, вы можете настроить фон, а также изменить границы. Пунктирные, округлые бегунки полосы прокрутки, с фоном или без – все это теперь легко достижимо.
Все эти псевдо-элементы находятся в вашем распоряжении:
::-webkit-scrollbar { }
::-webkit-scrollbar-button { }
::-webkit-scrollbar-track { }
::-webkit-scrollbar-thumb { }
::-webkit-scrollbar-corner { }Так же, как и обычно, вы можете стилизовать псевдо-элементы:
::-webkit-scrollbar {
width: 20px;
background: yellow;
}::-webkit-scrollbar-thumb {
border: 2px dotted green;
border-radius: 10px;
}В нашем примере, мы сделаем желтой всю область прокрутки и задаем ширину в 20 пикселей. Ползунок получает пунктирные линии зеленого цвета по внешней оболочке.
::-webkit-scrollbar-thumb:hover {
background: red;
}::-webkit-scrollbar-thumb:active {
background: blue;
}Здесь нам не хватает только одной вещи, мы не в состоянии использовать CSS transition для гладких анимационных эффектов.
Дополнительные псевдо-классы
Дополнительные псевдо классы могут быть использованы для более комплексной настройки. Например, класс “:inactive-window”, который позволяет вам делать дизайн псевдо-элементов для неактивных окон, в то время как два класса “:horizontal” и “:vertical” позаботятся о дизайне для горизонтальных или вертикальных полос:
::-webkit-scrollbar-thumb:horizontal {
height: 12px;
}
Высоких конверсий!
Автор статьи: Denis Potschien
10-03-2016
Прокрутка или скроллер
14 666 Скрипты / ScrollСкроллбар — perfect-scrollbar
Плагин позволяющий кастомизировать стандартный скроллбар.
6 873 Скрипты / ScrollScrollify — ускоритель прокрутки колёсика мыши
Scrollify — ускоритель прокрутки колёсика мыши. jQuery плагин, который помогает быстро и плавно переместиться к нужному разделу или секции страницы. Настраиваемый и оптимизированный для touch устройств.
Nicescroll — альтернатива полос прокрутки
Плагин nicescroll позволяет придать стандартным полосам прокрутки стиль внешне похожий на используемый в ios (как у apple). Поддерживается изменение как вертикальной, так и горизонтальной полосы прокрутки. Поддерживаются прокрутки в DIV-ах, Iframe-ах, textarea и body.
3 399 Скрипты / ScrollАвтопрокрутка вверх страницы
Стрелочка прокрутки до верха страницы на jQuery.
Анимированная прокрутка вверх
Простая реализация на jQuery анимированной прокрутки вверх страницы. Код проверяет положение скроллбара, если значение выше заданного, то кнопка прокрутки скрывается, иначе появляется кнопка, при нажатии на которую происходит прокрутка страницы в самый верх.
5 164 Скрипты / ScrollБыстрая прокрутка вверх и вниз
Добавление двух кнопочек на ваш сайт для быстрой прокрутки в начало или в конец страницы. Кнопки зафиксированы в левом нижнем углу. Когда вы прокручиваете страницу, то кнопки становятся прозрачными — то есть как бы не обращают на себя внимание. Когда страничка не подвижна, то кнопки хорошо видны.
TinyScroller — Прокручивающийся DIV
jаvascript реализующий прокрутку div и весом в 1,92 Kb. Может быть использован в любом HTML документе. Дизайн настраивается в CSS.
Плагины для создания анимации при скроллинге (прокрутке) страницы
В этой статье мы рассмотрим различные плагины, которые помогают анимировать элементы при прокрутке страницы. Мы начнем с самых простых плагинов Wow.js и scrollReveal.js, которые не требуют знания javascript, и закончим плагинами SuperScrollorama и ScrollMagic, в которых без знания javascript уже не обойтись.
Плагины, которые мы рассмотрим:
- Wow.js
- scrollReveal.js
- Skrollr.js
- ScrollMagic
Пример анимации WOW.js:
See the Pen wow.js+animate.css | first steps by Alexey (@CreativeSeo33) on CodePen.
Wow.js добавляет любую css анимацию (например, animate.css) к HTML элементам.
Например, элемент будет невидимым, пока пользователь не прокрутит страницу до него.
Использовать плагин очень просто, вам не понадобятся знания javascript.
Пример кода:
<div>Content to Reveal Here</div>
<div>Content to Reveal Here</div> |
Элемент div появится с анимацией bounceInUp, когда пользователь прокрутит до него.
Также вы можете задать параметры duration , delay , offset и iteration.
Пример анимации scrollReveal.js:
See the Pen Scroll Reveal by Alexey (@CreativeSeo33) on CodePen.
scrollReveal.js более сложный плагин и позволяет контролировать больше параметров.
Вы можете не только выбрать направление, в котором элемент появится, но также вы можете объединять эффекты с помощью ключевых слов from, and, then, with.
wait или after определяют задержку между анимациями.
Пример кода:
<!— Появление элемента с дефолтными параметрами —> <div data-scroll-reveal> Hello world! </div> <!— Появление элемента с заданными параметрами —> <div data-scroll-reveal=»enter left and move 50px over 1.33s»> Foo </div>
<!— Появление элемента с дефолтными параметрами —> <div data-scroll-reveal> Hello world! </div> <!— Появление элемента с заданными параметрами —> <div data-scroll-reveal=»enter left and move 50px over 1.33s»> Foo </div> |
Первый элемент появится как только попадет в область видимости.
У второго элемента заданы параметры анимации с которой он должен появиться, когда попадет в область видимости.
Пример анимации Skrollr.js:
See the Pen Merry Christmallax — Skrollr.js animation by Alexey (@CreativeSeo33) on CodePen.
Skrollr один из моих любимых плагинов.
Skrollr может вызывать анимации не только тогда, когда элемент попадает в область видимости, но и когда покидает ее. Также вы можете контролировать длительность анимации.
Другими словами, вы можете задать сколько пикселей пользователю надо будет промотать, чтобы анимация выполнилась полностью.
Пример анимации SuperScrollorama:
See the Pen Text animation path[Cree Indian Prophecy] by Alexey (@CreativeSeo33) on CodePen.
SuperScrollorama один из самых сложных плагинов, требующий знаний javascript. Если у вас хорошие знания javascript, то эта библиотека для вас.
С помощью этой библиотеки можно создавать сложные анимации:
- вложенные последовательности анимаций;
- перемотка назад, перемотка вперед, повтор;
- callbacks;
- и многое другое.
Пример анимации ScrollMagic:
See the Pen Simple ScrollMagic Tutorial by Alexey (@CreativeSeo33) on CodePen.
ScrollMagic один из самых последних плагинов анимации скроллинга и является переписанным предшественником SuperScrollorama.
Он также разработан Greensock и позволяет создавать сложные последовательности анимаций.
Преимущества:
- оптимизированная производительность;
- гибкость;
- большая совместимость;
- хорошо подходит для адаптивного дизайна;
Более подробно про анимацию с помощью ScrollMagic:
Как сделать плавный скролл на iOS с помощью CSS
Я не смогу вам показать демо, которые покажет суть проблемы, но постараюсь максимально описать её, а так же показать решение.
Суть проблемы
Во время разработки сайта вы можете столкнуться с проблемой разработки модального окошка для мобильной версии или для планшета на iOS.
На моем личном опыте: я верстал модальное окно для одного лендинга.
Как правило у него две основные части: (1) overlay — это слой, который перекрывает все остальные элементы страницы (обычно он полупрозрачный) и (2) само модальное окно, которое идет поверх overlay.
Так же: Если кому интересно, я как-то выкладывал пост про модальное окошко выполненное в стиле Material Design.
Для (1), я прописываю position: fixed (чтобы overlay был всегда фиксировано во всю ширину и высоту экрана пользователя и двигался за ним при скролле), ширину и высоту равную 100 прцоентам и возможность скроллить по y-оси.
Для (2), я использую position: absolute и сверху (top: 50%) и слева (left: 50%) делаю по 50% и потом с помощью минусного margin-left: -{w}px и margin-top: -{h}px выравниваю окно по центру. {w} — это ширина и {h} окна деленная на половину.
Для визуального представления можно посмотреть картинку ниже:
Решение
Решение проблемы как оказалось достаточно простое — это использовать overflow свойство, но конкретно для webkit браузеров.
В моем случае скролл делался в overlay окне, тем самым мне нужно дописать следующие свойства для этого блока:
overflow-y: scroll; -webkit-overflow-scrolling: touch;
C overflow-y все понятно. Для нас важнее свойство -webkit-overflow-scrolling.
Apple описывает его следующим образом:
Specifies whether to use native-style scrolling in an overflow:scroll element.
Дословный перевод: «хотите вы использовать встроенный скролл устройства (например iPhone 7) или стандартный overflow: scroll«.
Принимаются два значения:
auto — скролл с помощью одного пальца, без моментума
touch — стандартный скролл девайса
Источники и дальнейшее чтение
реализуем горизонтальную прокрутку секции на Flexbox
В этой статье мы рассмотрим решение повседневной задачи: как создать горизонтально прокручиваемую секцию сайта? Если вкратце, ответ — Flexbox.
Давайте разберёмся с этим более детально.
Каркас
Взгляните на эту разметку. Это простой блок section с несколькими вложенными div:
<section>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</section>Стили
Плохой дизайн никто не любит, поэтому давайте сделаем страничку более опрятной:
html,
body {
width: 100%;
height: 100%;
}
body {
background-color: #8e44ad;
margin: 0;
display: flex;
justify-content: center;
align-items: center;
}Сперва мы явно задаём ширину и высоту корневых элементов равной 100%. Затем мы определяем цвет фона, убираем отступ у body и центрируем вложенный в него элемент.
Для наглядности применим стили к этому элементу <section>:
. card {
background-color: #fff;
min-width: 100%;
min-height: 200px;
}
card {
background-color: #fff;
min-width: 100%;
min-height: 200px;
}С первым свойством всё понятно, второе указывает секции всё время занимать 100% ширины родительского элемента, а третье гарантирует, что высота секции всегда будет не менее 200px. Вот, что получилось на данном этапе:
Поместим все блоки card--content в секцию card и снова займёмся стилями. Сперва сделаем card flex-контейнером:
.card {display: flex}Затем займёмся .card--content:
.card--content {
background-color: #e74c3c;
min-width: 200px;
margin: 5px;
}Третья строка гарантирует, что ширина каждой карточки будет не меньше 200px, всё остальное просто и понятно. Вот результат:
Как вы могли заметить, прокручивается вся страница. Так происходит, потому что в секцию card помещаются не все элементы.
Исправим это так:
.card {
overflow-x: auto;
}И теперь прокручивается только секция:
Неплохо!
Прячем полосу прокрутки
Красоты ради можно спрятать полосу прокрутки. Для webkit-браузеров (Chrome и Safari) есть очень простой способ:
.card::-webkit-scrollbar {
display: none;
}Согласитесь, так страничка выглядит лучше.
Способы применения
В качестве примера мы использовали пустые блоки, но применить этот приём можно во многих приложениях. Вот пара примеров:
Ваша собственная версия Instagram:
Простая доска для заметок:
Перевод статьи «How to create horizontally scrollable sections with Flexbox»
Свойство поведения прокрутки CSS
Пример
Добавьте к документу эффект плавной прокрутки:
html {
поведение прокрутки: плавно;
}
Определение и использование
Свойство scroll-behavior определяет
следует ли плавно анимировать положение прокрутки вместо прямого прыжка,
когда пользователь нажимает ссылку в прокручиваемом поле.
| Значение по умолчанию: | авто |
|---|---|
| Унаследовано: | нет |
| Анимируемое: | нет.Прочитать о animatable |
| Версия: | Модуль просмотра CSSOM (рабочий проект) |
| Синтаксис JavaScript: | объект .style.scrollBehavior = «smooth» Попытайся |
Поддержка браузера
Числа в таблице указывают первую версию браузера, полностью поддерживающую свойство.
| Объект | |||||
|---|---|---|---|---|---|
| поведение прокрутки | 61.0 | 79,0 | 36,0 | 14,0 | 48,0 |
Синтаксис CSS
поведение прокрутки: авто | гладкое | начальное | наследование;
Стоимость недвижимости
| Значение | Описание |
|---|---|
| авто | Позволяет осуществлять «эффект прокрутки» прямого перехода между элементами в поле прокрутки. Это значение по умолчанию |
| гладкая | Позволяет плавно анимировать «эффект прокрутки» между элементами в поле прокрутки. |
| начальный | Устанавливает для этого свойства значение по умолчанию. Читать про начальные |
| наследовать | Наследует это свойство от своего родительского элемента. Читать про наследство |
CSS свойство overflow-y
Пример
Показать различные значения свойства overflow-y:
div.ex1 {переполнение-y: прокрутка;
}
дел.ex2 {
overflow-y: скрыто;
}
div.
ex3 {
overflow-y:
авто;
}
div.ex4 {
overflow-y: visible;
}
Определение и использование
Свойство overflow-y указывает, нужно ли обрезать контент, добавлять ли прокрутку.
bar, или отображать содержимое переполнения элемента уровня блока, когда оно переполняется на
верхний и нижний края.
Совет: Используйте свойство overflow-x для определения обрезки по левому и правому краю.
| Значение по умолчанию: | видимый |
|---|---|
| Унаследовано: | нет |
| Анимируемое: | нет. Прочитать о animatable |
| Версия: | CSS3 |
| Синтаксис JavaScript: | объект .style.overflowY = «scroll» Попытайся |
Поддержка браузера
Числа в таблице указывают первую версию браузера, полностью поддерживающую свойство.
Числа, за которыми следует -ms-, укажите первую версию, которая работала с приставка.
| Объект | |||||
|---|---|---|---|---|---|
| переполнение | 4,0 | 9,0 8,0 -мс- | 1,5 | 3,0 | 9,5 |
Синтаксис CSS
переполнение-y: видимый | скрытый | прокрутка | авто | начальный | наследование;
Стоимость недвижимости
| Значение | Описание | Играй |
|---|---|---|
| видимый | Контент не обрезается и может отображаться вне поля контента.Это значение по умолчанию | Играй » |
| скрыто | Контент обрезан — и механизма прокрутки нет | Играй » |
| свиток | Контент обрезан, и предусмотрен механизм прокрутки | Играй » |
| авто | Должен быть предусмотрен механизм прокрутки для переполненных ящиков | Играй » |
| начальный | Устанавливает для этого свойства значение по умолчанию. Читать про начальные | Играй » |
| наследовать | Наследует это свойство от своего родительского элемента. Читать про наследство |
Связанные страницы
УчебникCSS: переполнение CSS
Ссылка на HTML DOM: свойство overflowY
CSS свойство overflow-x
Пример
Показать различные значения свойства overflow-x:
div.ex1 {overflow-x: scroll;
}
дел. Ex2 {
переполнение-x: скрыто;
}
div.ex3 {
overflow-x:
авто;
}
div.ex4 {
overflow-x: visible;
}
Определение и использование
Свойство overflow-x указывает, нужно ли обрезать контент, добавлять ли прокрутку.
bar, или отображать содержимое переполнения элемента уровня блока, когда оно переполняется на
левый и правый края.
Совет: Используйте свойство overflow-y для определения отсечения на верхний и нижний края.
| Значение по умолчанию: | видимый |
|---|---|
| Унаследовано: | нет |
| Анимируемое: | нет. Прочитать о animatable |
| Версия: | CSS3 |
| Синтаксис JavaScript: | объект .style.overflowX = «прокрутка» Попытайся |
Поддержка браузера
Числа в таблице указывают первую версию браузера, полностью поддерживающую свойство.
Числа, за которыми следует -ms-, укажите первую версию, которая работала с приставка.
| Объект | |||||
|---|---|---|---|---|---|
| переполнение-x | 4. 0 | 9,0 8,0 -мс- | 3,5 | 3,0 | 9,5 |
Синтаксис CSS
переполнение-x: видимый | скрытый | прокрутка | авто | начальный | наследование;
Стоимость недвижимости
| Значение | Описание | Играй |
|---|---|---|
| видимый | Контент не обрезан, и он может отображаться за пределами левого и правые края.Это значение по умолчанию | Играй » |
| скрыто | Контент обрезан — и механизма прокрутки нет | Играй » |
| свиток | Контент обрезан, и предусмотрен механизм прокрутки | Играй » |
| авто | Должен быть предусмотрен механизм прокрутки для переполненных ящиков | Играй » |
| начальный | Устанавливает для этого свойства значение по умолчанию.Читать про начальные | Играй » |
| наследовать | Наследует это свойство от своего родительского элемента. Читать про наследство |
Связанные страницы
УчебникCSS: переполнение CSS
Ссылка на HTML DOM: свойство overflowX
поведение прокрутки | CSS-уловки
Свойство scroll-behavior в CSS позволяет нам определять, перескакивает ли место прокрутки браузера в новое место или плавно анимирует переход, когда пользователь щелкает ссылку, нацеленную на закрепленную позицию в поле прокрутки.
html {
поведение прокрутки: плавное;
} Более глубокое объяснение
Подождите, подождите, о чем мы говорим? Это элемент, содержимое которого выходит за его границы.
См.
Окно прокрутки пера от CSS-Tricks (@ css-tricks) на CodePen.
Обратите внимание, как прямоугольник в приведенной выше демонстрации имеет фиксированную высоту 200 пикселей ? Любое содержимое, превышающее эту высоту, находится за пределами поля, и мы добавили overflow-y: scroll , чтобы сделать это дополнительное содержимое доступным с помощью вертикальной прокрутки.Вот что мы подразумеваем под полем прокрутки.
Теперь предположим, что мы добавляем навигацию в верхнюю часть окна, где каждая ссылка нацелена на три раздела содержания:
См. Поле Pen Scrolling Box w / Nav от CSS-Tricks (@ css-tricks) на CodePen.
Каждая ссылка ведет пользователя непосредственно к различным разделам содержимого внутри поля прокрутки. По умолчанию переход между ними является резким скачком.
По умолчанию переход между содержимым резкий и внезапный. Такой прыжок может раздражать.Вот тут-то и появляется scroll-behavior , которое позволяет нам установить плавный переход при прокрутке. Такого рода вещи используются для причудливого Javascript, но поведение прокрутки даст нам возможность делать это изначально в CSS, когда поддержка браузера улучшится.
Синтаксис
.module {
поведение прокрутки: [авто | гладкий ];
} Значения
Свойство scroll-behavior принимает два значения, которые по существу включают и выключают функцию плавной прокрутки.
-
auto(по умолчанию): это значение разрешает резкий переход между элементами в поле прокрутки. -
smooth: Верное своему названию, это значение представляет собой плавный анимированный переход между элементами в поле прокрутки.
Демо
Следующая демонстрация будет работать только в Chrome 61+, Firefox 36+ и Opera 48+ на момент написания этой статьи.
См. Окно прокрутки пера с `scroll-behavior` от CSS-Tricks (@ css-tricks) на CodePen.
Поддержка браузера
Настольный ПК
| Chrome | Firefox | IE | Edge | Safari |
|---|---|---|---|---|
| 61 | 36 | Нет | 79 | Нет |
Мобильный /
Android Chrome Android Firefox Android iOS Safari 89 86 89 НетДополнительная информация
Хорошо управляемая прокрутка с помощью CSS Scroll Snap | Веб
Роберт является соавтором Web Fundamentals
Инженер-программист, работающий над Chromium
TL; DR
ФункцияCSS Scroll Snap позволяет разработчикам, чтобы создать хорошо управляемую прокрутку, объявив прокрутку привязка позиций.Статьи с разбивкой на страницы и карусели изображений — два часто используемых примеры этого. CSS Scroll Snap предоставляет простой в использовании и согласованный API для разрабатывая эти популярные шаблоны UX, и Chrome обеспечивает высокую точность и быстрая реализация в версии 69.
Фон
Футляр для фиксации прокрутки
Прокрутка — популярный и естественный способ взаимодействия с контентом в Интернете.
Это
является собственным средством платформы для предоставления доступа к большему количеству информации, чем
сразу видно на экране, что особенно важно на мобильных платформах
с ограниченной площадью экрана.Поэтому неудивительно, что веб-авторы
все чаще предпочитают организовывать контент в прокручиваемые плоские списки, а не
глубокие иерархии.
Главный недостаток скроллинга — неточность. Редко свиток заканчивается выровнен по абзацу или предложению. Это еще более заметно для разбитых на страницы или подробное содержание со значимыми границами, когда прокрутка заканчивается в середина страницы или изображения, оставляя его частично видимым. Эти варианты использования пользуйтесь хорошо управляемой прокруткой.
Веб-разработчики долгое время полагались на решения на основе JavaScript для управления свиток, чтобы помочь устранить этот недостаток. Однако решения на основе JavaScript не обеспечивают полноценное решение из-за отсутствия прокрутки примитивы настройки или доступ к комбинированной прокрутке. CSS Scroll Snap обеспечивает быстрое, точное и простое в использовании решение, которое работает последовательно во всех браузерах.
CSS Scroll Snap позволяет веб-авторам отмечать каждый контейнер прокрутки границами для операций прокрутки, на которых нужно закончить.Затем браузеры выбирают наиболее подходящее конечное положение в зависимости от особенностей операции прокрутки, макет и видимость контейнера прокрутки, а также подробные сведения о положениях привязки, затем плавно анимируйте его. Возвращаясь к нашему предыдущему примеру, поскольку пользователь завершает прокрутку карусели, ее видимое изображение встает на место. Нет свитка корректировки, необходимые для JavaScript.
Пример использования css scroll snap с каруселью изображений. Здесь привязка прокрутки обеспечивает в конце горизонтальной прокрутки изображения. center выравнивается с горизонтальным центром контейнера прокрутки.История API
CSS Scroll Snap обсуждается в нескольких
годы.
Как
в результате несколько браузеров реализовали более ранние черновые версии спецификаций, прежде чем они
прошел фундаментальный дизайн
менять. В
окончательный дизайн изменил базовую модель привязки на основе выравнивания точек на
модель выравнивания коробки. Это изменение гарантирует, что привязка прокрутки может обрабатываться быстро.
изменения дизайна и макета по умолчанию без необходимости повторного расчета авторами
точки привязки. Это также позволяет браузерам лучше принимать решения о привязке прокрутки.
е.g., правильно захватывая цели, большие, чем контейнер прокрутки.
Chrome, Opera и Safari поставляют последние спецификации вместе с другими основные производители браузеров, планирующие последовать их примеру в ближайшем будущем (Ошибка Firefox, Ошибка Edge).
Это означает, что вы найдете несколько руководств в Интернете, в которых обсуждается старый синтаксис. который в настоящее время все еще реализуется Edge и Firefox.
Основные изменения в спецификации скроллинга.Привязка прокрутки — это действие по настройке смещения прокрутки контейнера прокрутки. находиться в предпочтительной позиции привязки после завершения операции прокрутки.
Контейнер прокрутки может быть включен в режим привязки прокрутки с помощью типа с защелкиванием прокрутки имущество. Это говорит браузеру, что ему следует рассмотреть возможность привязки этой прокрутки.
контейнер к позициям привязки, созданным его потомками. с защелкой определяет ось, по которой происходит прокрутка: x , y или и , и
строгость щелчка: обязательно , приближение . Подробнее об этом позже.
Положение привязки может быть получено путем объявления желаемого выравнивания элемента.
Эта позиция представляет собой смещение прокрутки, при котором прокручивается ближайший предок.
контейнер и элемент выровнены, как указано для данной оси. В
На каждой оси возможны следующие выравнивания: начало , конец , центр .
Начало выравнивание означает, что край начала привязки контейнера прокрутки должен
быть на одном уровне с начальным краем области привязки элемента. Точно так же заканчиваются и центр выравнивания означают, что край или центр
должен быть заподлицо с торцом или центром области привязки элемента.
Snapport — это область
контейнера прокрутки, по которому выравниваются области привязки. По умолчанию это
то же, что и визуальное окно просмотра контейнера прокрутки, но его можно настроить
используя свойство scroll-padding .
Следующие примеры иллюстрируют, как эти концепции могут быть использованы на практике.
Пример — Горизонтальная галерея
Распространенным вариантом использования привязки прокрутки является карусель изображений.Например, чтобы
создать горизонтальную карусель изображений, которая привязывается к каждому изображению при прокрутке, мы
можно указать контейнер прокрутки, чтобы иметь обязательный тип привязки прокрутки на
Горизонтальная ось. установите для каждого изображения значение scroll-snap-align: center , чтобы убедиться, что
привязка центрирует изображение внутри карусели.
<стиль>
#gallery {
scroll-snap-type: x обязательный;
переполнение-x: прокрутка;
дисплей: гибкий;
}
#gallery img {
прокрутка-привязка-выравнивание: по центру;
}
Поскольку позиции привязки связаны с элементом, алгоритм привязки может быть умным о том, когда и как он привязывается к элементу и прокрутке размер контейнера. Например, рассмотрим случай, когда одно изображение больше, чем карусель. Наивный алгоритм привязки может помешать пользователю панорамировать вокруг, чтобы увидеть полное изображение. Но Технические характеристики требует реализации, чтобы обнаружить этот случай и позволить пользователю свободно прокручивать вокруг этого изображения, щелкая только по его краям.
Посмотреть демо | ИсточникПример — пройденная страница продукта
Еще одним распространенным случаем, в котором может быть полезна привязка к прокрутке, являются страницы с
несколько логических разделов, которые прокручиваются по вертикали, например, типичный
страницу продукта. scroll-snap-type: y приближение; — более естественный вариант для чехлов.
как это. Это не мешает, когда пользователь прокручивает до середины определенного
раздел, но также привязывается и привлекает внимание к новому разделу при прокрутке
достаточно близко к нему.
Вот как этого можно достичь:
<стиль>
статья {
scroll-snap-type: y близость;
/ * Зарезервировать место для заголовка плюс немного места для подглядывания. * /
прокрутка сверху: 15vh;
переполнение-y: прокрутка;
}
раздел {
/ * Начало выравнивания привязки. * /
прокрутка-привязка-выравнивание: начало;
}
header {
положение: фиксированное;
высота: 10vh;
}
<статья>
Заголовок
Раздел первый
Раздел второй
Раздел третий
Наш дизайн также попросил
верхней части, чтобы оставаться видимым, когда контейнер прокрутки защелкивается по порядку
чтобы предоставить пользователям подсказку о содержании выше.
scrollTo 
К сожалению, эти свойства пока поддерживаются не во всех браузерах.
Обратите внимание, что этот триггер применяется независимо от того, является ли измененный элемент
на пути от узла привязки к прокручиваемому элементу.
1
w3.org/TR/css-values-4/#css-wide-keywords Ссылка в: https://www.w3.org/TR/css-values-4/#comb-one Ссылка в: https: // www.w3.org/TR/css-writing-modes-4/#block-flow-direction Ссылка в: https://www.w3.org/TR/cssom-view/#dom-element-getboundingclientrect Ссылка в: https://www.w3.org/TR/cssom-view/#eventdef-document-scroll Ссылка в: https://drafts.csswg.org/cssom-view-1/#scrolling-box Ссылка в: https://dom.spec.whatwg.org/#concept-tree-descendant Ссылка в: https://html.spec.whatwg.org/multipage/interaction.html#dom-anchor Ссылка в: https: // html.spec.whatwg.org/multipage/interaction.html#focused-area-of-the-document Ссылка в: