overscroll-behaviorВластивість в контрольній групі CSS чи елемент буде використовувати «прокрутку» ланцюжок чи ні. Ви, мабуть, вже відчували таку поведінку і, можливо, сприймали як даність, що така прокрутка працює в Інтернеті! Якщо ви знаходитесь всередині елемента, який має власну прокрутку (скажімо, це вертикально), і ви прокрутили вниз до його кінця, то за замовчуванням наступний батьківський елемент вгору (можливо, сама сторінка) починає прокручувати в цьому напрямку. Якщо ви не хочете, щоб це за замовчуванням, overscroll-behaviorце те, що керує ним.
.stop-scroll-chaining ( overscroll-behavior: contain; /* or "none" */ )Перегляньте
поведінку перевертання ручки Кріса Коєра (@chriscoyier)
на CodePen
Властивість каскадується (тобто передається у спадок), тому, якщо вам не подобається, що будь-який елемент робить це, ви можете застосувати його до тіла, щоб запобігти цьому будь-де:
body ( overscroll-behavior: contain; /* or "none" */ )noneЗначення має зупинити overscroll affordance , які мої найкращі засоби думають , що такі речі , як це гумове кільцювання річ , які деякі браузери, в зокрема , пристрій з сенсорною панеллю прокруткою.
Значення за замовчуванням - auto.
Ресурси
- Модуль поведінки CSS Overscroll, рівень 1
- Новини веб-платформи
Підтримка браузера
Дані про підтримку веб-переглядача подані компанією Caniuse, яка містить більше деталей. Цифра вказує на те, що браузер підтримує цю функцію на цій версії та вище.
Робочий стіл
| Chrome | Firefox | IE | Край | Сафарі |
|---|---|---|---|---|
| 65 | 59 | 11 | 79 | Ні |
Мобільний / планшетний
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 81 | Ні |
- фон-фільтр
- видимість задньої поверхні
- фон
- фон-вкладення
- фоновий режим змішування
- фоновий кліп
- Колір фону
- фонове зображення
- фон-походження
- фонове положення
- фоновий повтор
- розмір фону
- кровоточити
- переповнення блоку
- кордон
- кордон-кордон
- обвал кордону
- кордон-зображення
- межа-радіус
- інтервал між межами
- знизу
- коробка-прикраса-брейк
- коробка-тінь
- розмір коробки
- пробій
- підпис
- карет
- карат-колір
- каретна форма
- ясно
- кліп-шлях
- колір
- налаштування кольору
- підрахунок стовпців
- заповнення стовпця
- колона-зазор
- стовпець-правило
- колонка-правило-колір
- стиль-колонка-правило
- ширина стовпця-правила
- колона-проліт
- ширина стовпця
- колонки
- містять
- зміст
- зустрічне збільшення
- зустрічне скидання
- зустрічний набір
- курсор
- напрямку
- дисплей
- порожні комірки
- заповнити
- фільтр
- згинати
- гнучка основа
- flex-direction
- flex-flow
- гнучко-рости
- згинання
- гнучке обгортання
- плавати
- шрифт
- шрифт-дисплей
- сімейство шрифтів
- шрифт-функція-налаштування
- кернінг шрифтів
- шрифт-оптико-розмір
- розмір шрифту
- font-size-Adjust
- шрифт-розтяжка
- шрифт
- шрифт-синтез
- шрифт-варіант
- шрифт-варіант-числовий
- шрифт-вага
- розрив
- сітка-рядок / сітка-стовпець
- сітка-шаблон-стовпці / сітка-шаблон-рядки
- висячі-пунктуаційні
- висота
- дефіси
- візуалізація зображень
- початкова буква
- вбудований розмір
- вставка
- вставний блок
- вставка-блок-кінець
- inset-block-start
- вбудований
- вставка-вбудований-кінець
- inset-inline-start
- ізоляція
- виправданий зміст
- виправдання-пункти
- зліва
- інтервал між літерами
- розрив рядка
- лінія-затискач
- висота рядка
- у стилі списку
- маржа
- margin-block
- margin-block-end
- margin-block-start
- маржа-вбудована
- margin-inline-end
- margin-inline-start
- маска-кліп
- маска-зображення
- режим маски
- маска-походження
- маска-позиція
- маска-повтор
- розмір маски
- максимальна висота
- max-inline-size
- макс. ширина
- мінімальна висота
- мінімальна ширина
- суміш-суміш-режим
- об'єкт-придатність
- об'єкт-положення
- офсет-якір
- відстань відстані
- зміщений шлях
- зміщення-обертання
- непрозорість
- порядок
- сироти
- контур
- контур-зміщення
- переповнення
- перелив-якір
- переповнення-обгортання
- надмірна поведінка
- прокладка
- розрив сторінки
- фарба-замовлення
- перспектива
- перспектива-походження
- місця-предмети
- покажчик-події
- положення
- котирування
- змінити розмір
- правильно
- міжряддя
- поведінка прокрутки
- прокрутка поля
- прокрутка
- прокрутка-прив’язка-вирівнювання
- прокрутка-миттєва зупинка
- тип прокрутки
- смуга прокрутки
- кольорова смужка прокрутки
- смуга прокрутки-жолоб
- ширина смуги прокрутки
- форма-зображення-поріг
- запас форми
- зовнішня форма
- говорити
- інсульт
- інсульт-дашаррей
- інсульт-дашофсет
- штриховий штрих
- інсульт-лайн приєднання
- ширина штриха
- розмір вкладки
- таблиця-макет
- вирівнювання тексту
- text-align-last
- текст-комбінат-вертикально
- текст-прикраса
- текст-прикраса-колір
- текст-прикраса-рядок
- текст-прикраса-пропустити
- text-decoration-skip-ink
- стиль оформлення тексту
- текст-оздоблення-товщина
- текст-відступ
- текст-виправдання
- орієнтація на текст
- переповнення тексту
- візуалізація тексту
- текст-тінь
- обведення тексту
- перетворення тексту
- підкреслення тексту-зміщення
- текст-підкреслення-положення
- зверху / знизу / ліворуч / праворуч
- сенсорна дія
- перетворювати
- перетворення-походження
- трансформувати стиль
- перехід
- перехід-затримка
- тривалість переходу
- перехід-властивість
- перехід-синхронізація-функція
- unicode-bidi
- діапазон Unicode
- виберіть користувач
- вертикальне вирівнювання
- видимість
- пробіл
- вдови
- ширина
- зміниться
- перерва слів
- інтервал між словами
- режим запису
- z-індекс
- масштабування
- A
- ::до після
- : активний
- : будь-яке посилання
- Сусідній брат чи сестра
- (атрибут)
- B
- : порожній
- C.
- : перевірено
- : поточний
- Дитина
- Клас
- D
- : за замовчуванням
- : dir ()
- : вимкнено
- Нащадок
- Е
- : порожній
- : увімкнено
- F
- :: перший лист
- ::перша лінія
- : перша дитина
- : перший тип
- : фокус
- : фокус-видимий
- : фокус всередині
- : майбутнє
- G
- Загальний брат чи сестра
- H
- : наведення
- Я
- : в діапазоні
- : невизначений
- : недійсний
- : is ()
- Посвідчення особи
- J
- К
- L
- : lang ()
- : остання дитина
- : останнього типу
- : посилання
- М
- :: маркер
- : збіги ()
- N
- : not ()
- : n-та дитина
- : n-та-остання-дитина
- : n-й-останній-типу
- : n-го типу
- О
- :тільки дитина
- : лише типу
- : необов’язково
- :за межою
- P
- :: заповнювач
- : минуле
- : показаний заповнювач
- Питання
- Р.
- : читання-запис /: лише читання
- :вимагається
- : корінь
- S
- :: вибір
- Т
- : ціль
- Тип
- U
- : недійсний користувач
- Універсальний
- V
- : дійсний
- :відвідав
- W
- X
- Y
- Z
Frontend Masters
Потрібен тренінг з розвитку інтерфейсу?
Frontend Masters - найкраще місце для його отримання. Вони мають курси з усіх найважливіших інтерфейсних технологій, від React до CSS, від Vue до D3, а також за допомогою Node.js та Full Stack.