В overscroll-behaviorимота в CSS контролира дали даден елемент ще използва "превъртане верижното" или не. Вероятно сте изпитвали това поведение и преди и може би сте приели за даденост, че превъртането работи по този начин в мрежата! Ако сте вътре в елемент, който има собствено превъртане (да речем, че е вертикално) и сте превъртали надолу до дъното му, тогава по подразбиране следващият родителски елемент нагоре (може би самата страница) започва да превърта в тази посока. Ако не искате това по подразбиране, overscroll-behaviorтова е, което го контролира.
.stop-scroll-chaining ( overscroll-behavior: contain; /* or "none" */ )Вижте
поведението на свръх скрола на Pen от Chris Coyier (@chriscoyier)
на CodePen.
Свойството каскадира (т.е. се наследява), така че ако не ви харесва някой елемент да го прави, можете да го приложите към тялото, за да предотвратите това да се случва навсякъде:
body ( overscroll-behavior: contain; /* or "none" */ )На noneстойност е трябвало да спре превъртане до края affordance , което ми най-доброто предположение означава, че подобни неща гумени ленти неща, че някои браузъри, особено устройства с тъчпад превъртане.
Стойността по подразбиране е auto.
Ресурси
- Модул за поведение на CSS Overscroll Ниво 1
- Новини на уеб платформата
Поддръжка на браузър
Тези данни за поддръжка на браузъра са от Caniuse, който има повече подробности. Число показва, че браузърът поддържа функцията на тази версия и по-нова.
работен плот
| Chrome | Firefox | IE | Ръб, край | Сафари |
|---|---|---|---|---|
| 65 | 59 | 11. | 79 | Не |
Мобилен / таблет
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 81 | Не |
- фон-филтър
- видимост отзад
- заден план
- фон-прикачен файл
- режим на смесване на фона
- фонов клип
- Цвят на фона
- фоново изображение
- фон-произход
- фон-позиция
- фон-повторение
- размер на фона
- кървят
- преливане на блок
- граница
- граница-граница
- граничен колапс
- граница-изображение
- граница-радиус
- раздалечаване на границите
- отдолу
- кутия-декорация-почивка
- кутия-сянка
- оразмеряване на кутията
- проникване
- страна на надписа
- каретка
- карета-цвят
- карета
- ясно
- clip-path
- цвят
- регулиране на цвета
- броя на колоните
- запълване на колона
- колонна пролука
- колона-правило
- колона-правило-цвят
- колона-правило-стил
- колона-правило-ширина
- колонен обхват
- ширина на колоната
- колони
- съдържат
- съдържание
- контра-увеличение
- обратно нулиране
- контра-набор
- курсора
- посока
- дисплей
- празни клетки
- запълване
- филтър
- огъване
- гъвкава основа
- flex-посока
- flex-flow
- flex-grow
- гъвкаво свиване
- гъвкаво обвиване
- плувка
- шрифт
- показване на шрифт
- шрифтово семейство
- настройки на шрифта
- кернинг на шрифтове
- оптично оразмеряване на шрифта
- размер на шрифта
- коригиране на размера на шрифта
- шрифт-разтягане
- стил на шрифта
- синтез на шрифтове
- шрифт-вариант
- font-variant-numeric
- шрифт-тегло
- празнина
- мрежа-ред / мрежа-колона
- мрежа-шаблон-колони / мрежа-шаблон-редове
- висяща пунктуация
- височина
- тирета
- изобразяване на изображения
- начална буква
- вграден размер
- вложка
- вложка-блок
- вложка-блок-край
- inset-block-start
- вграден вграден
- вграден-вграден-край
- inset-inline-start
- изолация
- justify-content
- оправдайте-елементи
- наляво
- интервал между буквите
- нов ред
- линия-скоба
- височина на линията
- стил на списък
- марж
- margin-block
- margin-block-end
- margin-block-start
- margin-inline
- margin-inline-end
- margin-inline-start
- маска-клип
- маска-изображение
- режим на маска
- маска-произход
- маска-позиция
- маска-повторение
- размер на маска
- максимална височина
- max-inline-size
- максимална ширина
- мин-височина
- мин. ширина
- режим на смесване-смесване
- обект-годен
- обект-позиция
- офсет-котва
- разстояние от разстояние
- офсетов път
- отместване-завъртане
- непрозрачност
- поръчка
- сираци
- контур
- контур-отместване
- препълване
- преливна котва
- препълване-увиване
- поведение при превишаване
- подплата
- разделител на страница
- поръчка за боя
- перспектива
- перспектива-произход
- място-елементи
- указател-събития
- позиция
- кавички
- преоразмеряване
- нали
- редица
- превъртане-поведение
- превъртане-поле
- превъртане-подложка
- превъртане-щракване-подравняване
- превъртане-щракване-спиране
- scroll-snap-type
- плъзгач
- плъзгач-цвят
- плъзгач-улей
- ширина на лентата за превъртане
- shape-image-prag
- марж на формата
- форма-отвън
- говорете
- удар
- инсулт-дашарей
- удар-дашофсет
- удар-linecap
- удар-linejoin
- ширина на хода
- размер на раздела
- оформление на масата
- подравняване на текст
- text-align-last
- текст-комбинирай-изправен
- текст-декорация
- текст-декорация-цвят
- текст-декорация-ред
- текст-декорация-пропускане
- text-decoration-skip-ink
- стил на декорация на текст
- текст-декорация-дебелина
- текст-отстъп
- текст-обосновка
- ориентация на текст
- препълване на текст
- рендиране на текст
- текст-сянка
- шрифт на текст
- преобразуване на текст
- текст-подчертаване-отместване
- текст-подчертаване-позиция
- горе / долу / вляво / вдясно
- сензорно действие
- трансформирам
- преобразуване-произход
- трансформиращ стил
- преход
- преход-забавяне
- преход-продължителност
- преход-свойство
- функция за преход-време
- unicode-bidi
- unicode-range
- потребител-изберете
- вертикално подравняване
- видимост
- бяло пространство
- вдовици
- ширина
- ще се промени
- прекъсване на думи
- интервал между думи
- режим на писане
- z-индекс
- мащабиране
- A
- ::преди след
- :активен
- : всяка връзка
- Съседен брат или сестра
- (атрибут)
- Б.
- : празно
- ° С
- : проверено
- :текущ
- Дете
- Клас
- д
- :по подразбиране
- : dir ()
- :хора с увреждания
- Потомък
- Е.
- : празен
- : активиран
- F
- ::първа буква
- ::първа линия
- :първо дете
- : първи тип
- : фокус
- : фокус-видим
- : фокус в рамките
- : бъдеще
- G
- Общ брат или сестра
- З.
- : задръжте
- Аз
- : в обхвата
- : неопределен
- : невалиден
- : is ()
- документ за самоличност
- J
- К
- L
- : lang ()
- :последно дете
- : последен от типа
- : връзка
- М
- :: маркер
- : съвпадения ()
- н
- :не()
- : n-то дете
- : n-то-последно-дете
- : n-ти-последен от типа
- : n-ти тип
- О
- :единствено дете
- : само от тип
- : по избор
- :извън обхват
- P
- :: заместител
- : минало
- : показан заместител
- Въпрос:
- R
- : четене-писане /: само за четене
- : задължително
- : корен
- С
- :: избор
- т
- :цел
- Тип
- U
- : потребител-невалиден
- Универсален
- V
- : валиден
- : посетен
- W
- х
- Y.
- Z.
Frontend Masters
Нуждаете се от обучение за развитие отпред?
Frontend Masters е най-доброто място да го получите. Те имат курсове по всички най-важни предни технологии, от React до CSS, от Vue до D3 и след това с Node.js и Full Stack.