CSS - Поведение при перелистывании: Пособие для начинающих

Здравствуйте, будущие маги CSS! Сегодня мы отправимся в увлекательное путешествие в мир поведения при перелистывании CSS. Не волнуйтесь, если вы никогда не писали ни строчки кода - я буду вашим доброжелательным проводником, и мы вместе исследуем эту тему, шаг за шагом. Так что возьмите ваш虚拟 рюкзак и погружайтесь с нами!

Что такое поведение при перелистывании?

Прежде чем мы углубимся в детали, давайте поймем, что такое поведение при перелистывании. Вы когда-нибудь прокручивали веб-страницу на своем телефоне и, достигнув конца, видели это пружинящее движение? Это и есть поведение при перелистывании в действии! Это как когда вы читаете книгу и пытаетесь перевернуть страницу после последней - есть это маленькое сопротивление. Свойство CSS overscroll-behavior позволяет нам контролировать, как веб-страница ведет себя в таких ситуациях.

Possible Values and Syntax

Теперь давайте посмотрим на различные значения, которые мы можем использовать с overscroll-behavior, и как их записывать в нашем CSS. Вот удобная таблица для резюме:

Значение	Описание
auto	Поведение по умолчанию - позволяет прокрутке "вытечь" к следующему элементу
contain	Prevents scroll chaining but allows bounce effects
none	Prevents both scroll chaining and bounce effects

Основной синтаксис выглядит так:

element {
overscroll-behavior: value;
}

Давайте разберем это с примерами!

Пример 1: Поведение по умолчанию (auto)

body {
overscroll-behavior: auto;
}

Это настройки по умолчанию. Это как если бы вы оставили свою книгу на столе - она будет вести себя так, как вы ожидаете, с обычной прокруткой и пружинящим эффектом.

Пример 2: Ограничение прокрутки

.scrollable-element {
overscroll-behavior: contain;
}

Представьте, что у вас есть прокручиваемый div на вашей веб-странице. С 'contain', это как если бы вы поставили закладку в конце главы. Вы можете продолжать листать страницы внутри этой главы (пружинящий эффект), но не сможете случайно перевернуть страницу на следующую главу (предотвращение цепной прокрутки).

Пример 3: Нет эффектов при перелистывании

.modal {
overscroll-behavior: none;
}

Это как если бы вы залили страницы вашей книги клеем в конце. Никакого переворачивания или пружинящего эффекта - она просто останавливается.

Применение

Теперь вы можете задаться вопросом: "Где я могу использовать это классное свойство?" Ну, оно применяется ко всем элементам, но особенно полезно на:

1. Элементе body
2. Прокручиваемых контейнерах (например, div с overflow: scroll)

Сравнение значений CSS overscroll-behavior

Давайте сравним эти значения с реальным примером. Представьте, что вы разрабатываете веб-страницу с прокручиваемым sidelbar и основной контентной областью.

<div class="sidebar">
<!-- Содержимое sidelbar -->
</div>
<div class="main-content">
<!-- Основной контент -->
</div>

.sidebar {
height: 100vh;
overflow-y: scroll;
overscroll-behavior: contain;
}

.main-content {
overscroll-behavior: auto;
}

В этом примере, sidelbar будет иметь собственное поведение прокрутки, содержащееся, в то время как основной контент будет вести себя normalmente. Это как если бы у вас была迷你-книга (sidelbar) внутри вашей основной книги (веб-страницы) - вы можете листать迷你-книгу, не влияя на основную книгу.

Два ключевых значения

Знаете ли вы, что вы можете использовать два значения с overscroll-behavior? Это как если бы вы дали separate инструкции для вертикнльной и горизонтальной прокрутки.

element {
overscroll-behavior: vertical-value horizontal-value;
}

Например:

.custom-scroll {
overscroll-behavior: contain auto;
}

Это instructs браузер содержать вертикнльную прокрутку, но позволять нормальное поведение для горизонтальной прокрутки. Это как если бы у вас была книга, где вы не можете перевернуть страницу после последней вертикнльно, но можете повернуть ее в сторону!

Связанные свойства

У overscroll-behavior есть некоторые родственники в семье CSS. Давайте познакомимся с ними:

1. overscroll-behavior-x: Управляет горизонтальным поведением при перелистывании
2. overscroll-behavior-y: Управляет вертикнльным поведением при перелистывании

Эти свойства как specialize инструменты в вашем CSS ящике. Когда вам нужно precise управление, эти свойства ваши go-to.

.horizontal-scroll {
overscroll-behavior-x: contain;
}

.vertical-scroll {
overscroll-behavior-y: none;
}

В этом примере, мы содержим горизонтальную прокрутку, но полностью предотвращаем вертикнльную прокрутку. Это как если бы у вас была панорамная книга, где вы можете прокручивать ее в стороны, но не вверх и вниз!

Практическое применение: Пример с модальным окном

Давайте применим все наши знания к реальному примеру - модальному окну.

<div class="page-content">
<!-- Основной контент страницы здесь -->
</div>
<div class="modal">
<div class="modal-content">
<!-- Содержимое модального окна здесь -->
</div>
</div>

.page-content {
height: 2000px; /* Длинный контент для возможности прокрутки -->
}

.modal {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
display: flex;
justify-content: center;
align-items: center;
overscroll-behavior: contain;
}

.modal-content {
background-color: white;
padding: 20px;
max-height: 80vh;
overflow-y: auto;
overscroll-behavior: contain;
}

В этом примере, мы создали модальное окно, которое перекрывает основной контент. Установив overscroll-behavior: contain на модальное окно и его контент, мы ensured, что прокрутка внутри модального окна не влияет на основной контент, и любая прокрутка содержится внутри модального окна.

Заключение

Итак, мои дорогие студенты, мы отправились в путешествие по стране CSS behaviors при перелистывании, от основных концепций до практических применений. Помните, как и любая хорошая книга, овладение CSS требует времени и практики. Не бойтесь экспериментировать и犯 mistakes - это как мы учимся и растем.

Пока вы продолжаете свое CSS приключение, держите знания о behavior при перелистывании в вашем кармане. Это может показаться мелочью, но это именно те мелочи, которые могут действительно elevate ваши веб-дизайны с хороших до великолепных.

Счастливого кодирования, и пусть ваши прокрутки всегда будут гладкими!

Credits: Image by storyset