​overscroll-behavior

Допустим, есть два вложенных друг в друга элемента. У обоих есть прокрутка. Если пользователь пролистает дочерний элемент, то при достижении его границы прокрутка перейдет на родительский элемент. Подобное поведение называется цепочкой прокрутки.

В мобильных браузерах при достижении границы прокрутки контент элемента немного оттягивается в направлении скролла, создавая эффект отскока.

Изменить поведение прокрутки в обоих примерах может свойство overscroll-behavior. С его помощью можно настроить прокрутку так, чтобы вложенные элементы не передавали скролл родителю, а страница не прыгала при достижении границ.

Синтаксис свойства позволяет задать два значения — для оси x и оси y. Если указано одно значение, оно применится к обеим осям. Можно использовать самостоятельные CSS-свойства overscroll-behavior-x и overscroll-behavior-y для отдельных осей или их логические эквиваленты overscroll-behavior-inline, overscroll-behavior-block.

Значения:
- auto — значение по умолчанию. При достижении границы элемента создаётся цепочка прокрутки либо эффект отскока в зависимости от устройства;
- contain — предотвращает создание цепочек прокрутки, но сохраняет эффект отскока;
- none — отключает создание цепочек прокрутки и эффект отскока.

👉 @frontendInterview

Frontend Interview - собеседования по Javascript / Html / Css

​overscroll-behavior

Допустим, есть два вложенных друг в друга элемента. У обоих есть прокрутка. Если пользователь пролистает дочерний элемент, то при достижении его границы прокрутка перейдет на родительский элемент. Подобное поведение называется цепочкой прокрутки.

В мобильных браузерах при достижении границы прокрутки контент элемента немного оттягивается в направлении скролла, создавая эффект отскока.

Изменить поведение прокрутки в обоих примерах может свойство overscroll-behavior. С его помощью можно настроить прокрутку так, чтобы вложенные элементы не передавали скролл родителю, а страница не прыгала при достижении границ.

Синтаксис свойства позволяет задать два значения — для оси x и оси y. Если указано одно значение, оно применится к обеим осям. Можно использовать самостоятельные CSS-свойства overscroll-behavior-x и overscroll-behavior-y для отдельных осей или их логические эквиваленты overscroll-behavior-inline, overscroll-behavior-block.

Значения:
- auto — значение по умолчанию. При достижении границы элемента создаётся цепочка прокрутки либо эффект отскока в зависимости от устройства;
- contain — предотвращает создание цепочек прокрутки, но сохраняет эффект отскока;
- none — отключает создание цепочек прокрутки и эффект отскока.

👉 @frontendInterview

hottg.com/frontendInterview/4652

1.4K viewsMay 28 at 06:47