overflow
Свойство overflow управляет отображением содержания блочного элемента, если оно целиком не помещается и выходит за область заданных размеров.
Синтаксис
overflow: auto | hidden | scroll | visible | inherit
Значения
visible Отображается все содержание элемента, даже за пределами установленной высоты и ширины. hidden Отображается только область внутри элемента, остальное будет скрыто. scroll Всегда добавляются полосы прокрутки. auto Полосы прокрутки добавляются только при необходимости. inherit Наследует значение родителя.
HTML5 CSS2.1 IE Cr Op Sa Fx
overflow Duis te feugifacilisi Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
Результат данного примера показан на рис. 1.
Рис. 1. Применение свойства overflow
Объектная модель
[window.]document.getElementById(» elementID «).style.overflow
Браузеры
Internet Explorer до версии 7.0 включительно:
- не поддерживает значение inherit ;
- относительно позиционированные дочерние элементы, значения overflow у которых заданы как auto или scroll ведут себя словно у них задано position : fixed .
Internet Explorer 8:
- Сочетание overflow со значением scroll со свойствами max-height и float может привести к пропаданию элементов веб-страницы, в браузере выводится пустой экран.
- Для блока, у которого указаны свойства float и overflow со значением scroll , игнорируется ширина, заданная через свойство max-width .
- Высота блока с горизонтальной полосой прокрутки увеличивается на высоту скролбара, хотя по спецификации CSS заданные размеры должны включать в себя и полосы прокрутки.
Кастомный скроллбар на CSS
Сейчас кастомные скроллбары становятся все более популярными. Есть разные причины для этого, например, дефолтный скроллбар может совершенно не встраиваться в дизайн или менять свое поведение в зависимости от ОС. Давайте рассмотрим, как его кастомизировать.
- Кастомизация дизайна скроллбара
- Старый синтаксис
- Новый синтаксис
- Вид скроллбара для всего сайта
- Парочку примеров
Хочу сразу объяснить: у скроллбара есть track и thumb. Их отличие вы можете увидеть на этой картинке:
Профессия «Фронтенд-разработчик»
- Изучите востребованные JavaScript и TypeScript
- Научитесь создавать пользовательские интерфейсы сайтов и приложений
- Освойте самый популярный фреймворк JavaScript — React
- Познакомьтесь с языками веб-разработки HTML и CSS
Кастомизация дизайна скроллбара
Раньше кастомизировать скроллбар можно было только для Webkit, поэтому Firefox и IE сразу выходили из этой игры. Сейчас у нас есть новый синтаксис, который работает только для Firefox, поэтому это упростит нам жизнь, особенно когда поддержка новых свойств увеличится.
Старый синтаксис
• The Scrollbar Width
Определяет размер скроллбара. Для горизонтальных скроллбаров используйте width, а для вертикальных — height.
• The Scrollbar Track
Вся полоса прокрутки полностью (смотри скрин выше). Мы можем стилизовать это с помощью background colors, shadows, border-radius, и borders.
• The Scrollbar Thumb
Очень важно также не забыть стилизовать ползунок, так как именно с ним будут взаимодействовать пользователи.
Новый синтаксис
• The Scrollbar Width
Здесь, в отличие от Webkit, мы не можем указывать числа. Больше всего мы будем оперировать со значениями auto и thin.
• Scrollbar Color
С помощью этого свойства мы можем указать цвета как для полосы прокрутки, так и для ползунка.
Вид скроллбара для всего сайта
Необязательно указывать вид скроллбара для всех тегов/классов, мы можем задать это глобально:
• Старый синтаксис
::-webkit-scrollbar-track < background-color: darkgrey; >::-webkit-scrollbar-thumb
• Новый синтаксис
Парочку примеров
Некоторые примеры, чтобы вам было проще разобраться:
Профессия «Фронтенд-разработчик»
- Изучите востребованные JavaScript и TypeScript
- Научитесь создавать пользовательские интерфейсы сайтов и приложений
- Освойте самый популярный фреймворк JavaScript — React
- Познакомьтесь с языками веб-разработки HTML и CSS
Практика CSS Scroll Snapping
Спецификация CSS Scroll Snap позволяет привязывать положение прокрутки к определённым элементам или местоположению после того, как пользователь прокрутил страницу или элемент. Это отличный способ для реализации следующих решений:
Браузерная поддержка и базовое использование
С тех пор, как CSS Scroll Snap был представлен в 2016 году, поддержка браузерами существенно улучшилась. К 2018 году Google Chrome (69+), Firefox, Edge, и Safari поддерживали какую-либо версию этого модуля. Согласно CanIUse, на данный момент технология поддерживается всеми современными браузерами.
Примечание от переводчика
Работоспособность приведённых в статье примеров CodePen проверена в мобильных браузерах Firefox и Chrome Canary (в Chrome Stable некоторые еще не сработали)
Использование Scroll Snapping заключается в установке свойства scroll-snap-type для элемента-контейнера и свойства scroll-snap-align для дочерних элементов. Прокрутка элемента-контейнера осуществляеться с привязкой к дочерним элементам, которые вы определили. В этом самом простом случае это будет выглядеть следующим образом:
.container < scroll-snap-type: y mandatory; >.child
Данный способ отличается от первой версии спецификации, которая позволяла вам устанавливать точки привязки вручную, используя ключевое слово repeat .
.container < /* OLD */ scroll-snap-points-y: repeat(300px); >Такой подход был довольно ограниченным, поскольку позволял устанавливать точки привязки только через определённые равные промежутки, что не позволяло реализовать интерфейс, который работал бы с элементами разных размеров. Например, если элементы меняются в зависимости от размера экрана, это может вызвать проблемы. На данный момент все современные браузеры поддерживают новый способ, который ориентируется не на расстояние, а на сами элементы.
Вы можете использовать оба этих метода (если ваш макет позволяет это) для поддержки старых версий браузеров:
.container < scroll-snap-type: mandatory; scroll-snap-points-y: repeat(300px); scroll-snap-type: y mandatory; >.child
Ещё более гибкий вариант – использовать новый синтаксис, а для браузеров, которые его не поддерживают, использовать полифилл. Именно этот способ я использую в примерах ниже.
Свойства контейнера
Как и в случае с любым другим свойством, неплохо бы познакомиться со значениями, которые оно принимает. Свойства из спецификации » scroll snap » применяются как к родителю, так и к дочерним элементам, с определёнными значениями для каждого. Подобно тому, как в Flexbox или CSS Grid родитель становится «flex-» или «grid-» контейнером, можно сказать, что здесь родитель становится scroll-контейнером.
Далее представлены свойства и значения для родительского контейнера и описание принципа их работы.
scroll-snap-type: «mandatory» vs «proximity»
Значение » mandatory » определяет поведение, при котором всякий раз, когда пользователь прекращает прокрутку, браузер должен возвращать её к точке привязки.
Значение » proximity » менее строгое – оно означает, что браузер может возвращаться к точке привязки, если ему это покажется уместным. Из моего опыта, если задано это значение, срабатывание происходит, если прокрутка остановилась в пределах нескольких сотен пикселей от точки привязки.
Используя данное свойство в своей работе, я обнаружил, что значение » mandatory » делает работу интерфейса более последовательной и предсказуемой, но как говорится в спецификации, оно также может быть достаточно опасным. Представьте ситуацию, в которой элемент внутри прокручиваемого контейнера по высоте больше области видимости:
Если для контейнера задано scroll-snap-type: mandatory , он всегда будет привязан либо к верху данного элемента, либо к верху элемента, расположенного ниже, делая невозможным зафиксировать прокрутку в середине высокого элемента.
scroll-padding
По умолчанию, при прокрутке дочерние элементы будут прижиматься к самым краям контейнера. Вы можете изменить это, задав для контейнера свойство scroll-padding . Оно имеет такой же синтаксис, что и свойство padding .
Это может быть полезно, если в вашем макете есть элементы, которые могут мешать содержимому, например фиксированный заголовок.
Свойства дочерних элементов
Теперь давайте перейдём к свойствам дочерних элементов
scroll-snap-align
Данное свойство позволяет указать, какая сторона элемента должна прижиматься к контейнеру. У свойства есть три возможных значения: » start «, » center » и » end «.
Значения определяются относительно направления прокрутки. Если вы прокручиваете элемент по вертикали, » start » подразумевает верхний край элемента, если по горизонтали – левый. Значения » center » и » end » работают по тому же принципу. Для каждого направления прокрутки можно устанавливать своё значение, разделив их пробелом.
scroll-snap-stop: «normal» vs «always»
По умолчанию, привязка прокрутки происходит только тогда, когда пользователь прекращает прокрутку. Это значит, что за время прокрутки некоторые точки привязки потенциально могут быть пропущены.
Это поведение можно изменить, задав любому дочернему элементу свойство » scroll-snap-stop: always «. Это заставляет прокручиваемый контейнер остановиться на этом элементе, прежде чем пользователь сможет продолжить скролить.
Давайте рассмотрим несколько примеров использования технологии «Scroll Snap».
Пример 1: Вертикальный список
Чтобы в вертикальном списке задать привязку для каждого дочернего элемента, нужна всего пара строк CSS. Сперва мы говорим контейнеру привязываться к элементам вдоль вертикальной оси:
.container
Затем мы определим точки привязки. Здесь мы указываем, что точкой привязки должен стать верх каждого элемента:
.child
Пример 2: Горизонтальный слайдер
Чтобы сделать горизонтальный слайдер, мы говорим контейнеру привязываться к элементам при прокрутке по оси X. Дополнительно используем свойство » scroll-padding «, чтобы убедиться, что дочерние элементы привязаны к центру контейнера.
.container
Затем мы сообщаем контейнеру, к каким точкам привязаться. Чтобы расположить элементы посередине родителя, мы определяем центр каждого элемента как точку привязки.
.child
Пример 3: Вертикальная прокрутка полноэкранных блоков
Мы можем установить точки привязки непосредственно на элементе:
html < /* body won't work ¯\_(ツ)_/¯ */ scroll-snap-type: y mandatory; >Затем мы задаем каждому блоку размер области видимости и определяем точку привязки по верхнему краю блока:
section
Пример 4: Горизонтальная прокрутка полноэкранных блоков
Здесь используется та же концепция, что и в версии с вертикальной прокруткой, но с установкой точек привязки на оси X.
body < scroll-snap-type: x mandatory; >section
Пример 5: Двухмерная сетка изображений
Привязка прокрутки (scroll snapping) может работать в двух измерениях одновременно. И снова-таки, мы можем установить непосредственно на элементе:
.container
Затем мы определяем левый верхний угол каждой плитки как точку привязки:
.tile
Некоторые мысли об удобстве для пользователей
Связывать с прокруткой – опасное занятие. Поскольку это один из основных способов взаимодействия с приложением, любое изменение этого поведения может вызывать раздражение – термин «scrolljacking» используется для обозначения подобного рода явлений.
Достоинством реализованного в CSS управления привязкой прокрутки является то, что вы не получаете прямой контроль над позицией прокрутки. Вместо этого, вы просто даёте браузеру список позиций для привязки таким образом, который соответствует платформе, способу ввода и пользовательским предпочтениям. Это значит, что поведение прокрутки, которое вы создаёте, на любой платформе будет ощущаться как нативное (то есть, с использованием тех же анимаций и т.д).
Считаю это ключевым преимуществом привязки прокрутки, реализованной с помощью CSS, перед JavaScript библиотеками, предлагающими схожую функциональность.
По моим личным ощущениям, это работает достаточно хорошо, особенно на мобильных устройствах. Возможно, из-за того, что «scroll snapping» уже является частью встроенного в мобильные платформы UI. Вспомните главный экран на iOS и Android устройствах – это, по сути, горизонтальный слайдер с точками привязки. Взаимодействие в Chrome на Android особенно приятно, потому что воспринимается как обычная прокрутка, но область видимости всегда останавливается на точке привязки:
Your browser does not support HTML5 video.
Для реализации такого поведения, определённо нужно проводить некоторые математические вычисления. Благодаря CSS Scroll Snapping мы добиваемся такого же результата без этого.
Конечно, мы не должны создавать точки привязки на всём подряд. Например, страницы со статьями прекрасно обойдутся и без них. Но я думаю, что они могут существенно улучшить удобство взаимодействия с приложение, если будут использованы в нужный момент – галереи изображений, слайдшоу кажутся хорошими кандидатами.
Заключение
Если относиться к этому ответственно, привязка прокрутки может стать полезным инструментом. Точки привязки CSS позволяют вам включиться во встроенный в браузер процесс работы с прокруткой без ущерба плавности интерфейса. С появлением JavaScript API (потенциально на горизонте) они станут еще более мощными.
Как создать скроллинг на своем сайте с помощью CSS?
Вы хотите создать эффекты параллакса и скроллинга на странице, но не знаете, с чего начать? Не нужно сразу обращаться к Javascript: есть более простые варианты. В этой статье мы расскажем, как все сделать при помощи СSS-кода. Также объясним, с какими браузерами эффекты работать не станут.
Если нужен плавный скроллинг
Чтобы создать простую прокрутку из одной части страницы в другую, нужно использовать CSS-свойство scroll-behavior. Вот его основные значения:
- Auto. Стоит по умолчанию.
- Smooth. Плавный переход.
- Instant. Быстрый переход.
Так выглядит CSS-код на примере со вторым значением и условным селектором p:
p
scroll-behavior: smooth;
>Далее мы покажем на примере, как сделать плавный переход от одной части сайта к другой при помощи значения smooth. В этом случае пользователь увидит переход при нажатии на гиперссылку, ведущую к другой части с текстом.
Пример с HTML-кодом
Шаг 1. Создадим два блока с ссылками друг на друга:
Плавная прокрутка
Блок 1
Перейди по гиперссылке, чтобы увидеть плавный скроллинг.
Нажми сюда, чтобы перейти к Блоку 2.
Блок 2
Нажми сюда, чтобы перейти к Блоку 1.
Шаг 2. Добавим плавный скроллинг с помощью кода CSS внутри тега . Код состоит из cвойства scroll-behavior и значения smooth. Еще выберем цвета и высоту для разных частей с текстом: розовый и желтый.
Благодаря значению smooth удалось добиться плавного скроллинга на веб-странице.
Совместимость с браузерами
Свойство scroll-behavior работает почти со всеми популярными браузерами: Google Chrome, Firefox, Safari и Opera. Исключение — Internet Explorer и старые версии браузеров. Например, на Safari версии 15.2–15.3 свойство работать не станет.
Если нужен параллакс
Parallax — это эффект, при котором элементы заднего плана движутся быстрее или медленнее, чем объекты на переднем плане. Например, пользователь прокручивает страницу и видит, что фоновое изображение движется с одной скоростью, а текст — с другой.
Пример с HTML-кодом
В этом случае мы сделаем так, чтобы фоновая картинка вообще не двигалась во время скроллинга.
Шаг 1. Напишем код, в котором будет большой текстовый блок фиолетового цвета:
Прокрутите страницу дальше
Этот текст нужен просто для того, чтобы продемонстрировать эффект. Вам стоит прокрутить страницу вверх и вниз — текстовый блок будет двигаться, а изображение останется на месте.
Шаг 2. Рассмотрим код CSS. В нем будет ссылка на изображение, которая станет фоновым благодаря значению fixed в свойстве background-attachment.
В итоге получился параллакс на странице.
Примечание. Чтобы убрать этот эффект, достаточно вместо background-attachment: fixed указать в коде background-attachment: scroll. Изображение будет двигаться вместе с текстом:
Совместимость с браузерами
Свойство background-attachment работает с Google Chrome, Firefox, Opera, Internet Explorer и другими браузерами. Исключение — Safari, Android Browser и мобильная версия Opera.
Дополнительные примеры
Чтобы лучше разобраться с CSS-свойствами, рассмотрим другие эффекты для прокрутки на сайте .
Пример 1
По шагам рассмотрим, как добиться эффекта многоуровневого скроллинга . В этом случае несколько объектов на сайте будут двигаться с разной скоростью при прокрутке.
Шаг 1. Напишем две строки следущим образом:
Блок 1
Блок 2
Шаг 2. Добавим CSS-код внутри тега . Сначала укажем параметры и выберем фон на бесплатном фотостоке для блока 2:
Шаг 3. Там же укажем параметры заголовков:
Шаг 4 . Определим параметры других элементов:
В итоге на сайте движутся три объекта. Перечислим их от самого медленного до самого быстрого:
- изображение на фоне блока 2;
- заголовок «Блок 2»;
- блок 1 с оранжевым фоном.
Так выглядит многоуровневый скроллинг.
Пример 2
Рассмотрим, как зафиксировать какой-либо элемент на сайте во время прокрутки. Например, на сайте timeweb.cloud есть такой закрепленный блок:
Шаг 1 . Напишем код с двумя текстовыми блоками таким образом:
Зафиксированный элемент
Элемент
Шаг 2. Напишем следующий CSS-код внутри тега :
При помощи свойства значения fixed удалось сделать так, чтобы элемент двигался вместе с прокруткой.
Пример 3
В этом случае разберемся, как сделать горизонтальный скроллинг.
Шаг 1. Создадим четыре строки текста таким образом:
Раз
Два
Три
Четыре
Шаг 2 . Добавим CSS-код внутри тега . В коде обозначим размеры текстовых блоков и их цвета.
Так выглядит горизонтальная прокрутка страницы, которая условно разделена на несколько частей с текстом.
Заключение
Создание эффекта скроллинга — это несложный процесс. Только при помощи свойств CSS можно сделать так, чтобы пользователь видел необычные переходы между блоками сайта при прокрутке.
В некоторых случаях нужны длинные коды: например, для многоуровневого варианта, при котором каждый блок на странице движется с уникальной скоростью. Но это в любом случае лучше, чем создавать подобные переходы на JavaScript.