overscroll-behavior

Свойство overscroll-behavior контролирует, как браузер реагирует на достижение конца области прокрутки.

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

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

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

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

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

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

Возможные значения overscroll-behavior:

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

        
          
          .overscroll-behavior-auto {  overscroll-behavior: auto;}.overscroll-behavior-contain {  overscroll-behavior: contain;}.overscroll-behavior-none {  overscroll-behavior: none;}
          .overscroll-behavior-auto {
  overscroll-behavior: auto;
}

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

.overscroll-behavior-none {
  overscroll-behavior: none;
}

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

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

Свойство overscroll-behavior со значением contain может пригодиться при создании диалоговых окон или каруселей. Оно предотвратит выход скролла за пределы элементов.

Значение none поможет в разработке одностраничных приложений (SPA). Оно отключит эффект отскока, который в мобильных браузерах может вызвать ненужную перезагрузку страницы.