overscroll-behaviorСвойство в контрольной группе CSS ли элемент будет использовать «прокрутку» цепочку или нет. Вы, вероятно, уже сталкивались с подобным поведением раньше и, возможно, считали само собой разумеющимся, что прокрутка в Интернете работает так же! Если вы находитесь внутри элемента, у которого есть собственная прокрутка (скажем, вертикальная), и вы прокручиваете его вниз, то по умолчанию следующий родительский элемент вверх (возможно, сама страница) начинает прокручиваться в этом направлении. Если вы не хотите использовать это значение по умолчанию, overscroll-behaviorэто то , что им контролирует.
.stop-scroll-chaining ( overscroll-behavior: contain; /* or "none" */ )Посмотрите, как работает
прокрутка пера Криса Койера (@chriscoyier)
на CodePen.
Свойства каскадов (т. Е. Наследуются), поэтому, если вам не нравится, что какой-либо элемент выполняет это, вы можете применить его к телу, чтобы это не происходило где-либо:
body ( overscroll-behavior: contain; /* or "none" */ )Предполагается, что это noneзначение не допускает чрезмерной прокрутки , что, как я предполагаю, означает такие вещи, как резиновые ленты , которые есть в некоторых браузерах, особенно на устройствах с прокруткой тачпада.
Значение по умолчанию - auto.
Ресурсы
- Модуль CSS Overscroll Behavior, уровень 1
- Новости веб-платформы
Поддержка браузера
Эти данные о поддержке браузером взяты из Caniuse, где есть более подробная информация. Число означает, что браузер поддерживает эту функцию в этой версии и выше.
Рабочий стол
| Хром | Fire Fox | IE | Край | Сафари |
|---|---|---|---|---|
| 65 | 59 | 11 | 79 | Нет |
Мобильный / планшет
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 81 год | Нет |
- фон-фильтр
- обратная видимость
- фон
- фоновое приложение
- фоновый режим наложения
- фоновый клип
- фоновый цвет
- фоновая картинка
- фон-происхождение
- фоновая позиция
- фон-повтор
- размер фона
- кровоточить
- блок-переполнение
- граница
- граница
- граница-коллапс
- граница-изображение
- border-radius
- пограничный интервал
- Нижний
- коробка-украшение-перерыв
- тень коробки
- размер коробки
- взлом
- сторона подписи
- каретка
- цвет каретки
- каретка
- Чисто
- клип-путь
- цвет
- регулировка цвета
- счетчик столбцов
- заполнение столбца
- колонна-пробел
- столбец-правило
- цвет правила столбца
- стиль правила столбца
- ширина правила столбца
- столбец
- ширина колонки
- столбцы
- содержать
- содержание
- счетчик
- сброс счетчика
- счетчик
- курсор
- направление
- отображать
- пустые ячейки
- наполнять
- фильтр
- сгибать
- гибкая основа
- гибкое направление
- гибкий поток
- гибкий рост
- гибко-усадочный
- гибкая пленка
- плавать
- шрифт
- отображение шрифтов
- семейство шрифтов
- настройки-функции-шрифта
- font-kerning
- шрифт-оптический-размер
- размер шрифта
- размер шрифта настроить
- font-stretch
- стиль шрифта
- шрифт-синтез
- вариант шрифта
- шрифт-вариант-числовой
- font-weight
- зазор
- сетка-строка / сетка-столбец
- Сетка-шаблон-столбцы / Сетка-шаблон-строки
- висячая пунктуация
- высота
- дефисы
- рендеринг изображений
- буквица
- встроенный размер
- вставка
- вставка-блок
- вставка-блок-конец
- вставка-блок-начало
- вставка в линию
- inset-in-line-end
- inset-inline-start
- изоляция
- обосновать содержание
- обосновать элементы
- оставили
- Межбуквенное расстояние
- Разрыв строки
- струбцина
- высота линии
- список
- поле
- маржа-блок
- край блока
- маржа-блок-начало
- маржа в линию
- margin-inline-end
- маржа-инлайн-начало
- маска-зажим
- маска-изображение
- режим маски
- маска происхождения
- положение маски
- маска-повтор
- размер маски
- максимальная высота
- max-inline-size
- Максимальная ширина
- мин-высота
- минимальная ширина
- режим смешивания
- подходящий объект
- объект-позиция
- смещение-якорь
- расстояние смещения
- смещение пути
- смещение-поворот
- непрозрачность
- порядок
- сирот
- контур
- контур-смещение
- переполнение
- якорь перелива
- переполнение
- поведение сверхпрокрутки
- набивка
- разрыв страницы
- заказ краски
- перспектива
- перспектива происхождения
- места
- указатель-события
- позиция
- цитаты
- изменить размер
- верно
- междурядье
- поведение прокрутки
- поле прокрутки
- прокрутка
- прокрутка-привязка-выравнивание
- остановка прокрутки
- тип прокрутки
- полоса прокрутки
- цвет полосы прокрутки
- полоса прокрутки-желоб
- ширина полосы прокрутки
- форма-изображение-порог
- поле формы
- форма снаружи
- разговаривать
- Инсульт
- инсульт-дашаррей
- штрих-тире
- штрих-линия
- штрих-линия
- ширина штриха
- размер табуляции
- сервировка стола
- выравнивание текста
- текст-выравнивание-последний
- текст-комбинированный-вертикальный
- текст-украшение
- текст-украшение-цвет
- текст-украшение-строка
- текст-украшение-пропустить
- текст-украшение-пропустить-чернила
- стиль оформления текста
- толщина текстового украшения
- отступ текста
- выравнивание текста по ширине
- ориентация текста
- переполнение текста
- рендеринг текста
- текстовая тень
- текстовый штрих
- текстовое преобразование
- текст-подчеркивание-смещение
- текст-подчеркивание-позиция
- сверху / снизу / слева / справа
- сенсорное действие
- преобразовать
- трансформация происхождения
- стиль трансформации
- переход
- задержка перехода
- Продолжительность перехода
- переходная собственность
- временная функция перехода
- юникод-биди
- диапазон юникода
- выбор пользователя
- вертикальное выравнивание
- видимость
- белое пространство
- вдовы
- ширина
- изменится
- разрыв слова
- межсловный интервал
- режим письма
- z-индекс
- увеличить
- А
- ::до после
- : active
- : любая ссылка
- Соседний брат
- (атрибут)
- B
- :пустой
- C
- : проверено
- :Текущий
- Ребенок
- Учебный класс
- D
- :дефолт
- : dir ()
- :отключен
- Потомок
- E
- :пустой
- :включено
- F
- ::первое письмо
- ::первая линия
- :Первый ребенок
- : первый в своем роде
- : focus
- : focus-visible
- : focus-within
- :будущее
- грамм
- Общий брат
- ЧАС
- : hover
- я
- :в диапазоне
- : неопределенный
- :инвалид
- :является()
- Я БЫ
- J
- K
- L
- : lang ()
- :последний ребенок
- : last-of-type
- :связь
- M
- :: маркер
- :совпадения()
- N
- :нет()
- : nth-child
- : nth-last-child
- : nth-last-of-type
- : nth-of-type
- О
- :единственный ребенок
- : only-of-type
- :необязательный
- :вне диапазона
- п
- :: заполнитель
- :прошлый
- : показанный заполнитель
- Q
- р
- : чтение-запись /: только чтение
- :требуется
- :корень
- S
- :: выбор
- Т
- :цель
- Тип
- U
- : недействительный пользователь
- Универсальный
- V
- :действительный
- : посетил
- W
- Икс
- Y
- Z
Frontend Masters
Требуется обучение фронтенд-разработке?
Frontend Masters - лучшее место для его получения. У них есть курсы по всем наиболее важным интерфейсным технологиям, от React до CSS, от Vue до D3, а также по Node.js и Full Stack.