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 | Нет |
Мобильный /
Дополнительная информация
Хорошо управляемая прокрутка с помощью 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;
}
<статья>
Заголовок
Раздел первый
Раздел второй
Раздел третий
Заполнение и поля прокрутки
У нашей страницы продукта верхний заголовок фиксированной позиции.
Наш дизайн также попросил
верхней части, чтобы оставаться видимым, когда контейнер прокрутки защелкивается по порядку
чтобы предоставить пользователям подсказку о содержании выше.
scroll-padding — это новое свойство css, которое можно использовать для настройки эффективного
видимая область контейнера прокрутки. Этот регион также известен как привязка и
используется при вычислении выравнивания привязки прокрутки. Свойство определяет вставку
напротив поля заполнения контейнера прокрутки. В нашем примере 15vh дополнительная вставка
был добавлен вверху, что указывает браузеру рассмотреть более низкую позицию, 15vh ниже верхнего края контейнера прокрутки, как его вертикальный начальный край для
привязка прокрутки.При привязке начальный край целевого элемента привязки будет
покраснетесь с этой новой позицией, оставив место наверху.
scroll-margin определяет исходную величину, используемую для настройки цели привязки
эффективное поле, аналогичное тому, как scroll-padding работает с Snap scroll
контейнер.
Вы могли заметить, что у этих двух свойств нет слова « snap » в
их. Это сделано намеренно, поскольку они фактически изменяют поле для всех соответствующих
операции прокрутки, а не просто привязка прокрутки.Например, Chrome берет
их необходимо учитывать при вычислении размера страницы для операций прокрутки страниц, таких как
как PageDown и PageUp, а также при расчете количества прокрутки для Element.scrollIntoView () операция.
API прокрутки DOM
Привязка прокрутки происходит после всех операций прокрутки, включая те
инициирован сценарием. Когда вы используете такие API, как Element.,
браузер вычислит предполагаемую позицию прокрутки операции, а затем применит
соответствующая логика привязки, чтобы найти окончательное место привязки.Таким образом, есть
нет необходимости, чтобы пользовательский сценарий выполнял какие-либо ручные вычисления для привязки.
scrollTo
Плавная прокрутка
Плавная прокрутка управляет поведением операции программной прокрутки при привязка прокрутки определяет его место назначения. Поскольку они контролируют ортогональные аспекты прокручивая, их можно использовать вместе и дополнять друг друга.
Поведение при превышении прокрутки
API поведения Overscroll контролирует, как прокрутка привязана к нескольким элементам, и на нее не влияет прокрутка щелчок.
Предостережения и передовой опыт
Избегайте использования обязательной привязки, когда целевые элементы широко разнесены. Это может привести к тому, что содержимое между позициями привязки станет недоступным.
Используйте CSS.supports для определения функции CSS Scroll Snap. Но избегайте использования с защелкой типа , который также присутствует в устаревшей спецификации и может
быть ненадежным.
if (CSS.supports ('scroll-snap-align: start')) {
// использовать css scroll snap
} еще {
// использовать запасной вариант
}
Не предполагайте, что программно прокручиваются API, такие как Element.scrollTo всегда заканчивать с запрошенным смещением прокрутки. Привязка прокрутки может регулировать
смещение прокрутки после завершения программной прокрутки. Обратите внимание, что это не было
хорошее предположение даже до привязки прокрутки, поскольку прокрутка могла быть
прервано по другим причинам, но особенно в случае прокрутки
щелчок.
Будущие работы
Chrome 69 содержит основные функции, указанные в CSS Scroll Snap. Технические характеристики. Основные упущения — привязка для прокрутки клавиатуры и фрагментарные переходы, которые на данный момент не поддерживаются никакими другими реализации. Со временем Chrome будет улучшать эту функцию, уделяя особое внимание отсутствующим функциям, улучшая алгоритм выбора моментального снимка, плавность анимации и возможности devtools.
12 CSS Scroll Effects
Коллекция отобранных вручную бесплатных HTML и CSS-эффектов прокрутки примеров кода. Обновление коллекции за март 2019 года. 5 новинок.
- CSS Parallax Effects
- Плагины и примеры jQuery Parallax
Автор
- Генри Зарза
О коде
Части перекрытия
Перекрывающаяся часть с закрепленной позицией.
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
отзывчивый: да
Зависимости: —
О коде
Баннер без полей
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
отзывчивый: да
Зависимости: —
Автор
- Андрей Шарапов
О коде
CSS Scroll-Behavior: Smooth
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
отзывчивый: да
Зависимости: —
Автор
- Андрей Шарапов
О коде
CSS поведение прокрутки, тип привязки прокрутки и режим смешивания
Свойства CSS scroll-behavior и scroll-snap-type — потрясающие инструменты для создания целевых страниц без использования js.
К сожалению, эти свойства пока поддерживаются не во всех браузерах.
Совместимые браузеры: Chrome, Firefox, Opera, Safari
отзывчивый: да
Зависимости: —
Автор
- Райан Маллиган
О коде
CSS Scroll Reveal Sections
Используйте свойство clip-path для создания разделов героев с фиксированным положением.
Совместимые браузеры: Chrome, Firefox, Opera, Safari
отзывчивый: да
Зависимости: —
Автор
- Мерт Цукурен
Сделано с
- HTML / CSS (SCSS) / JavaScript (Babel)
О коде
Простая анимация прокрутки
Простая анимация прокрутки в HTML, CSS и JS.
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
отзывчивый: да
Зависимости: —
Автор
- Дронка Рауль
Сделано с
- HTML / CSS (SCSS) / JavaScript (Babel)
О коде
Эффект перекоса
Эффект перекоса прокрутки в HTML, CSS и JS.
Совместимые браузеры: Chrome, Firefox, Opera, Safari
отзывчивый: да
Зависимости: —
Автор
- magnificode
Сделано с
- HTML / CSS (SCSS) / JavaScript (Babel)
О коде
Эффект прокрутки фона и текста
Супер быстрая идея для эффекта отображения текста при прокрутке.
Совместимые браузеры: Chrome, Firefox, Opera, Safari
Адаптивный: нет
Зависимости: —
О коде
Градиент прокрутки
Фоновый градиент, который адаптируется к положению прокрутки.
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
отзывчивый: да
Зависимости: —
Автор
- Квентин Верон
О коде
Прокрутка одной страницы
Прокрутка одной страницы.Ни строчки JavaScript!
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
отзывчивый: да
Зависимости: —
Сделано с
- HTML (мопс) / CSS (SCSS) / JavaScript (Babel)
О коде
Наблюдатель перекрестков
API, который можно использовать для понимания видимости и положения элементов DOM относительно содержащего элемента или области просмотра верхнего уровня.Позиция доставляется асинхронно и полезна для понимания видимости элементов и реализации предварительной и отложенной загрузки содержимого DOM.
Совместимые браузеры: Chrome, Firefox, Opera, Safari
отзывчивый: да
Зависимости: —
О коде
Половина прокрутки
Половина прокрутки на чистом CSS.
Совместимые браузеры: Chrome, Firefox, Opera, Safari
отзывчивый: да
Зависимости: —
О коде
Изменение фона CSS при прокрутке
Фиксированный элемент меняет цвет при входе в разные секции.Использует повторяющиеся элементы для каждого раздела. Теперь с режимом наложения магия для дополнительного эффекта.
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Адаптивный: нет
Зависимости: —
CSS Scroll Anchoring Module Level 1
CSS Scroll Anchoring Module Level 1Абстрактные
Изменения в элементах DOM над видимой областью поля прокрутки могут привести к перемещению страницы пока пользователь использует контент.
Эта спецификация предлагает механизм для смягчения этого раздражающего взаимодействия с пользователем. отслеживая положение узла привязки и соответствующим образом регулируя смещение прокрутки.
В этой спецификации также предлагается API, позволяющий веб-разработчикам отказаться от такого поведения.
CSS — это язык для описания рендеринга структурированных документов. (например, HTML и XML) на экране, на бумаге и т. д.Статус этого документа
В этом разделе описывается статус этого документа на момент его публикации.Другие документы могут заменять этот документ. Список текущих публикаций W3C и последняя редакция этого технического отчета можно найти в указателе технических отчетов W3C по адресу https://www.w3.org/TR/.
Этот документ был опубликован Рабочей группой CSS в виде рабочего проекта . Публикация как рабочий проект не подразумевает одобрения Членством W3C.
Это черновик документа и может быть обновлен, заменен или устарели другими документами в любое время.Неуместно ссылаться на этот документ как на незавершенную работу.
Пожалуйста, отправьте отзыв путем регистрации проблем в GitHub (предпочтительно), включая код спецификации «css-scroll-anchoring» в заголовке, например: «[Css-scroll-anchoring] … краткое содержание комментария… ». Все вопросы и комментарии хранятся в архиве. Кроме того, отзывы можно отправить в (заархивированный) общедоступный список рассылки [email protected].
Этот документ регулируется документом W3C от 15 сентября 2020 года.
Этот документ был подготовлен группой, действующей в соответствии с Патентной политикой W3C.
W3C ведет публичный список любых раскрытий патентов, сделанных в связи с результатами работы группы;
эта страница также включает инструкции по раскрытию патента.
Лицо, которое действительно знает о патенте, который, по его мнению,
содержит существенные претензии, должны раскрывать информацию в соответствии с разделом 6 Патентной политики W3C.
Содержание
- 1. Введение
- 1.1 Определения значений
- 2 Описание
- 2.1 Выбор узла привязки
- 2.2 Регулировка прокрутки
- 2.2.1 Окно подавления
- 2.2.2 Триггеры подавления
- 3 Исключение API
- 4 Вопросы конфиденциальности и безопасности
- Изменения
- Изменения с рабочего проекта от 11 февраля 2020 г.
- Соответствие
- Условные обозначения в документе
- Классы соответствия
- Частичные реализации
- Реализации нестабильных и проприетарных функций
- Неэкспериментальные реализации
- Индекс
- Термины, определенные в данной спецификации
- Термины, определенные ссылкой
- Рекомендации
- Нормативные ссылки
- Индекс собственности
1.Введение
Сегодня пользователи Интернета часто отвлекаются на перемещающийся контент. из-за изменений, происходящих за пределами области просмотра. Примеры включают скрипт, вставляющий iframe, содержащий рекламу, или изображения без размера загружаются в медленной сети.
Исторически поведение браузера по умолчанию было для сохранения абсолютной позиции прокрутки при таких изменениях. Это означает, что, чтобы избежать смещения содержимого, веб-страница может попытаться зарезервировать место на странице для всего, что загрузится позже.На практике немногие веб-сайты делают это постоянно.
Привязка прокрутки призвана свести к минимуму неожиданные сдвиги контента.
Он делает это, регулируя положение прокрутки
чтобы компенсировать изменения вне области просмотра.
Объясняющий документ дает неформальный обзор привязки прокрутки.
1.1. Определение значений
Эта спецификация следует соглашениям об определении свойств CSS из [CSS2] с использованием синтаксиса определения значений из [CSS-VALUES-3].Типы значений, не определенные в этой спецификации, определены в CSS Values & Units [CSS-VALUES-3]. Комбинация с другими модулями CSS может расширить определения этих типов значений.
В дополнение к значениям для конкретных свойств, перечисленным в их определениях, все свойства, определенные в этой спецификации также принимают ключевые слова CSS в качестве значения свойства. Для удобства чтения они явно не повторяются.
2. Описание
Привязка прокрутки пытается сохранить стабильность просмотра документа пользователем при изменении макета.Он работает, выбирая узел DOM (узел привязки ) движение которого используется для определения настроек положения прокрутки.
Однако, если контейнер прокрутки в настоящее время привязан к элементу, (см. [CSS-SCROLL-SNAP-1]) привязка прокрутки ограничена настройками, которые могут быть разрешены повторной привязкой.
2.1. Выбор узла привязки
Каждое поле прокрутки направлено на выбор узла привязки, который находится глубоко в DOM. и либо должен иметь приоритет как важный узел DOM, либо близок к блокировать начальный край оптимальной области просмотра.
Примечание. Если пользовательский агент не поддерживает свойство прокрутки, Оптимальная область просмотра поля прокрутки эквивалентна области его содержимого.
Узел привязки может быть любым блоком, кроме неатомарного встроенного. Узел привязки всегда является потомком поля прокрутки. В некоторых случаях поле прокрутки может не выбирать ни один узел привязки.
Элемент C является жизнеспособным кандидатом на то, чтобы стать якорем прокрутки для поля прокрутки S , если он соответствует всем следующие критерии:
Некоторые элементы считаются приоритетными кандидатами для выбора привязки:
Якорь DOM выделенной области документа.
Элемент, содержащий текущее активное выбранное совпадение алгоритм поиска на странице агента пользователя. Если совпадение охватывает несколько элементов, то рассмотрим только первый такой элемент.
Обратите внимание, что если кандидат с приоритетом является неатомарным встроенным элементом, то вместо этого рассмотрите его ближайший элемент-предок, который не является неатомарный встроенный элемент в качестве приоритетного кандидата.
Алгоритм выбора узла привязки для поля прокрутки S выглядит следующим образом:Если S связан с элементом чье вычисленное значение свойства overflow-anchor равно none, тогда не выбирайте узел привязки для S .
В противном случае для каждого приоритетного кандидата ПК в указанном порядке, проверьте, является ли PC жизнеспособным кандидатом в S . Если да, выберите его как закрепить узел и прекратить.
В противном случае для каждого дочернего элемента DOM N элемента или документа, связанного с S , выполнить алгоритм проверки кандидатов для N в S , и завершается, если выбирается узел привязки.
Если N — исключенное поддерево, или если N полностью закреплен в S , затем ничего не делать ( N и его потомки пропускаются).
Если N полностью виден в S , выберите N в качестве узла привязки.
Если N частично виден:
Для каждого ребенка DOM C из N , выполнить алгоритм проверки кандидатов для C в S , и завершается, если выбирается узел привязки.
Для каждого абсолютно позиционированного элемента A , содержащий блок N , но чей родительский DOM не N , выполнить алгоритм проверки кандидатов для A в S , и завершается, если выбирается узел привязки.
Выберите N в качестве узла привязки. (Если этот шаг достигнут, среди потомков N не было найдено подходящего якорного узла.)
Примечание: более глубокие узлы предпочтительнее, чтобы свести к минимуму возможность изменения содержимого внутри узла привязки, но за пределами области просмотра, что приведет к появлению видимых содержимое для перемещения без активации какой-либо настройки привязки прокрутки.
Концептуально, новый узел привязки вычисляется для каждого поля прокрутки. всякий раз, когда изменяется положение прокрутки любого поля прокрутки.(В качестве оптимизации производительности реализация может подождать, пока узел привязки не понадобится, перед его вычислением.)
Узел DOM N является исключенным поддеревом , если он является элементом и выполняется любое из следующих условий:2.2. Регулировка прокрутки
Если был выбран узел привязки,
затем, когда узел привязки перемещается,
браузер вычисляет предыдущее смещение y0 и текущее смещение y1 ,
начального края блока ограничивающего прямоугольника привязки прокрутки узла привязки,
относительно начального края блока прокручиваемого содержимого в направлении потока блока скроллера.
Затем он ставит в очередь корректировку положения прокрутки y1 - y0 ,
в направлении потока блока,
выполняется в конце окна подавления.
Регулировка прокрутки — это тип [[cssom-view-1 # scrolling-events # scrolling]], как определено в [CSSOM-VIEW],
и генерирует события прокрутки описанным здесь способом.
2.2.1. Окно подавления
Каждое движение узла привязки происходит в пределах временного окна. вызвал окно подавления , определяется следующим образом:
Окно подавления начинается в начале текущей итерации цикла событий модели обработки HTML, или в конце последнего завершенного окна подавления, в зависимости от того, что было более поздним.
Окно подавления заканчивается в конце текущей итерации цикла событий модели обработки HTML, или непосредственно перед следующей операцией, результат или побочные эффекты которой будет отличаться в результате изменения положения прокрутки (например, вызов
getBoundingClientRect ()), в зависимости от того, что наступит раньше.
Примечание. Границы окна подавления должны быть включены в стандарт HTML после того, как API привязки прокрутки стабилизирован.
В одном окне подавления может происходить более одного движения узла привязки.
В конце окна подавления пользовательский агент выполняет все настройки прокрутки, которые были поставлены в очередь во время окна и не подавляется каким-либо триггером подавления во время окна.
2.2.2. Триггеры подавления
Триггер подавления — это срабатывание который подавляет регулировку привязки прокрутки для перемещения узла привязки, если это происходит в пределах окна подавления для этого движения.Эти триггеры:
Любое изменение вычисленного значения любого из следующих свойств: на любом элементе на пути от узла привязки до прокручиваемого элемента (или документа), включая оба:
Любое изменение вычисленного значения свойства позиции. на любом элементе внутри прокручиваемого элемента (или документа), таким образом, что элемент становится или перестает быть абсолютно позиционированным.
Обратите внимание, что этот триггер применяется независимо от того, является ли измененный элемент
на пути от узла привязки к прокручиваемому элементу.Смещение прокрутки прокручиваемого элемента равно нулю.
Обратите внимание, что этот триггер применяется независимо от того, является ли измененный элемент
на пути от узла привязки к прокручиваемому элементу.Примечание. Триггеры подавления существуют для совместимости с существующим веб-контентом, имеющим отрицательный взаимодействия с привязкой прокрутки из-за смещения содержимого в обработчиках событий прокрутки.
3. Исключение API
Привязка прокрутки должна быть режимом поведения по умолчанию при запуске, так что пользователи получают выгоду даже от устаревшего контента. overflow-anchor может отключить привязку прокрутки к части или всей веб-странице (отказаться), или исключить части модели DOM из алгоритма выбора узлов привязки.
Значения определены следующим образом:
- авто
заявляет, что элемент потенциально имеет право участвовать в алгоритме выбора узла привязки для любого поля прокрутки, созданного элементом или предком.
- нет
Объявляет, что элемент и его потомки (которые не вложены в другой элемент прокрутки) не имеют права участвовать в алгоритме выбора узла привязки для любого поля прокрутки, созданного элементом или предком.
Примечание. Невозможно снова включить привязку прокрутки. для потомков якоря переполнения: нет элемента. Однако дочерние контейнеры прокрутки автоматически «включают его». (для собственного поля прокрутки) если они явно не имеют привязки переполнения: для них также не установлено ни одного.
Примечание. Также было предложено свойство привязки переполнения (с другими значениями)
для липких полос прокрутки CSS,
который теперь заменен.
4. Вопросы конфиденциальности и безопасности
Эта спецификация, поскольку он только регулирует то, как мы вычисляем позиции прокрутки, не вводит никаких новых соображений конфиденциальности или безопасности.
Изменения
Изменения с рабочего проекта от 11 февраля 2020 г.
Соответствие
Условные обозначения в документе
Требования к соответствию выражаются комбинацией описательные утверждения и терминология RFC 2119. Ключевые слова «ДОЛЖНЫ», «НЕ ДОЛЖЕН», «ОБЯЗАТЕЛЬНО», «ДОЛЖЕН», «НЕ ДОЛЖЕН», «ДОЛЖЕН», «НЕ ДОЛЖЕН», «РЕКОМЕНДУЕТСЯ», «МОЖЕТ» и «ДОПОЛНИТЕЛЬНО» в нормативных частях настоящего документ следует интерпретировать, как описано в RFC 2119.Однако для удобства чтения эти слова не отображаются в верхнем регистре. буквы в этой спецификации.
Весь текст данной спецификации является нормативным, кроме разделов. явно помечены как ненормативные, примеры и примечания. [RFC2119]
Примеры в этой спецификации представлены словами «например»
или выделяются отдельно от нормативного текста с помощью class = "example" ,
как это:
Это информативный пример.
Информационные заметки начинаются со слова «Примечание» и выделяются
нормативный текст с class = "note" , например:
Примечание, это информативное примечание.
Рекомендации — это нормативные разделы, призванные привлечь особое внимание.
отделить от другого нормативного текста кодом , например
это: UA ДОЛЖНЫ предоставлять доступную альтернативу.
Классы соответствия
Соответствие данной спецификации определяется для трех классов соответствия:
- таблица стилей
- А CSS таблица стилей.
- рендерер
- UA, который интерпретирует семантику таблицы стилей и отображает
документы, которые их используют.
- инструмент для разработки
- UA, который пишет таблицу стилей.
Таблица стилей соответствует этой спецификации если все его утверждения, которые используют синтаксис, определенный в этом модуле, действительны в соответствии с общей грамматикой CSS и отдельными грамматиками каждого функция, определенная в этом модуле.
Средство визуализации соответствует этой спецификации если в дополнение к интерпретации таблицы стилей, как определено соответствующие спецификации, он поддерживает все определенные функции по этой спецификации, правильно проанализировав их и соответствующим образом отрисовываем документ.Однако неспособность UA для корректной визуализации документа из-за ограничений устройства не делает UA несоответствующим. (Например, UA не требуется для отображения цвета на монохромном мониторе.)
Инструмент разработки соответствует этой спецификации если он пишет синтаксически правильные таблицы стилей в соответствии с общая грамматика CSS и отдельные грамматики каждой функции в этот модуль и соответствовать всем остальным требованиям соответствия таблиц стилей как описано в этом модуле.
Частичное внедрение
Чтобы авторы могли использовать правила синтаксического анализа с прямой совместимостью для
назначать резервные значения, средства визуализации CSS должны обрабатывать как недопустимые (и игнорировать
при необходимости) любые правила, свойства, значения свойств, ключевые слова,
и другие синтаксические конструкции, для которых у них нет пригодного уровня
служба поддержки. В частности, пользовательские агенты не должны выборочно
игнорировать неподдерживаемые значения компонентов и соблюдать поддерживаемые значения в одном
объявление многозначного свойства: если какое-либо значение считается недопустимым
(поскольку должны быть неподдерживаемые значения), CSS требует, чтобы все объявление
игнорировать.
Реализации нестабильных и проприетарных функций
Чтобы избежать конфликтов с будущими стабильными функциями CSS, CSSWG рекомендует следовать передовым методам реализации нестабильных функций и проприетарных расширений CSS.
Неэкспериментальные реализации
Когда спецификация достигает стадии рекомендации кандидата, возможны неэкспериментальные реализации, и разработчики должны выпустить реализацию без префикса любой функции уровня CR, которую они может продемонстрировать правильность реализации в соответствии со спецификацией.
Для установления и поддержания взаимодействия CSS через реализациях, рабочая группа CSS просит, чтобы не экспериментальные Средства визуализации CSS отправляют отчет о реализации (и, при необходимости, тестовые примеры, использованные для этого отчета о реализации) в W3C перед выпуск без префикса реализации каких-либо функций CSS. Тестовые наборы отправленные в W3C могут быть проверены и исправлены CSS. Рабочая группа.
Дополнительная информация об отправке тестовых примеров и отчетов о реализации можно найти на веб-сайте Рабочей группы CSS по адресу https: // www.w3.org/Style/CSS/Test/. Вопросы следует направлять в список рассылки [email protected].
Индекс
Термины, определенные в данной спецификации
- анкерный узел, в §2
- алгоритм выбора узла привязки, в §2.1
- авто, в §3
- алгоритм проверки кандидатов, в §2.1
- исключенное поддерево, в §2.1
- полностью обрезано, в §2.1
- полностью видно, в §2.1
- нет, в §3
- якорь перелива, в § 3
- частично видно, в §2.1
- приоритетных кандидатов, в §2.1
- ограничивающий прямоугольник привязки прокрутки, в §2.1
- триггер подавления, в §2.2.2
- окно подавления, в §2.2.1
- жизнеспособный кандидат, в §2. 1
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 Ссылка в: Термины, определенные ссылкой
- [css-box-4] определяет следующие термины:
- область содержимого
- маржа
- набивка
- [css-display-3] определяет следующие термины:
- атомарный встроенный
- ящик
- содержащий блок
- дисплей
- нет
- [css-overflow-3] определяет следующие термины:
- спиральный контейнер
- прокручиваемый прямоугольник переполнения
- [css-position-3] определяет следующие термины:
- абсолютное
- низ
- исправлено
- осталось
- позиция
- правый
- верх
- [CSS-SCROLL-SNAP-1] определяет следующие термины:
- оптимальная область обзора
- прокрутка-отступ
- [css-sizing-3] определяет следующие термины:
- высота
- макс-высота
- макс. Ширина
- мин-высота
- мин. Ширина
- ширина
- [css-transforms-1] определяет следующие термины:
- [css-values-4] определяет следующие термины:
- [css-writing-Mode-4] определяет следующие термины:
- [CSSOM-VIEW] определяет следующие термины:
- getBoundingClientRect ()
- свиток
- поле прокрутки
- [DOM] определяет следующие термины:
- [HTML] определяет следующие термины:
- dom анкер
- область документа в фокусе
Список литературы
Нормативные ссылки
- [CSS-BOX-4]
- Элика Этемад.Модуль блочной модели CSS, уровень 4. 21 апреля 2020 г. WD. URL: https://www.w3.org/TR/css-box-4/
- [CSS-DISPLAY-3]
- Tab Atkins Jr .; Элика Этемад. Модуль отображения CSS, уровень 3. 19 мая 2020 г. CR. URL: https://www.w3.org/TR/css-display-3/
- [CSS-OVERFLOW-3]
- Дэвид Барон; Элика Этемад; Флориан Ривоаль. CSS Overflow Module, уровень 3. 3 июня 2020 г. WD. URL: https://www.w3.org/TR/css-overflow-3/
- [CSS-POSITION-3]
- Элика Этемад; и другие.Модуль позиционирования CSS, уровень 3. 19 мая 2020 г. WD. URL: https://www.w3.org/TR/css-position-3/
- [CSS-SCROLL-SNAP-1]
- Мэтт Раков; и другие. CSS Scroll Snap Module, уровень 1. 19 марта 2019 г. CR. URL: https://www.w3.org/TR/css-scroll-snap-1/
- [CSS-SIZING-3]
- Tab Atkins Jr .; Элика Этемад. CSS Box Sizing Module Level 3. 23 октября 2020 г. WD. URL: https://www.w3.org/TR/css-sizing-3/
- [CSS-TRANSFORMS-1]
- Саймон Фрейзер; и другие.CSS Transforms Module Level 1. 14 февраля 2019 г. CR. URL: https://www.w3.org/TR/css-transforms-1/
- [CSS-VALUES-3]
- Tab Atkins Jr .; Элика Этемад. Модуль «Значения и единицы измерения CSS», уровень 3. 6 июня 2019 г. CR. URL: https://www.w3.org/TR/css-values-3/
- [CSS-VALUES-4]
- Tab Atkins Jr .; Элика Этемад. Модуль «Значения и единицы измерения CSS», уровень 4. 31 января 2019 г. WD. URL: https://www.w3.org/TR/css-values-4/
- [CSS-WRITING-MODES-4]
- Элика Этемад; Коджи Исии.Режимы написания CSS, уровень 4. 30 июля 2019 г. CR. URL: https://www.w3.org/TR/css-writing-modes-4/
- [CSS2]
- Берт Бос; и другие. Спецификация каскадных таблиц стилей, уровень 2, редакция 1 (CSS 2.1). 7 июня 2011. РЭЦ. URL: https://www.w3.org/TR/CSS21/
- [CSSOM-VIEW]
- Саймон Питерс. Модуль просмотра CSSOM. 17 марта 2016 г. WD. URL: https://www.w3.org/TR/cssom-view-1/
- [DOM]
- Энн ван Кестерен. DOM Standard. Уровень жизни.URL: https://dom.spec.whatwg.org/
- [HTML]
- Энн ван Кестерен; и другие. Стандарт HTML. Уровень жизни. URL: https://html.spec.whatwg.org/multipage/
- [RFC2119]
- С. Браднер. Ключевые слова для использования в RFC для обозначения уровней требований. Март 1997 г. Наилучшая текущая практика. URL: https://tools.ietf.org/html/rfc2119
Индекс собственности
| Имя | Стоимость | Начальный | Применимо к | дюйм. | % возрастов | Тип анимации | Канонический порядок | Расчетное значение |
|---|---|---|---|---|---|---|---|---|
| анкер перелива | авто | никто | авто | все элементы | нет | н / д | дискретный | за грамматику | указанное ключевое слово |