Property overscroll-behavior

Specifies whether to have scroll chaining or
overscroll affordance in x- and y-directions

Запобігання прокручування основного елемента по горизонталі

У нашому простому прикладі overscroll-behavior-x
(перегляньте також вихідний код) у нас є два блоки
рівня блоку, один в іншому. Зовнішнє поле має
велику ширину, тому сторінка прокручується
горизонтально. Внутрішній блок має невелику ширину
(і висоту), щоб він зручно розміщувався всередині
вікна перегляду, але його вміст має велику ширину,
тому він прокручується горизонтально.

За замовчуванням, коли внутрішнє поле
прокручується та досягається межа прокручування,
почне прокручуватися вся сторінка, що, ймовірно,
не те, чого ми хочемо. Щоб уникнути цього, ви
можете встановити overscroll-behavior-x: contain у
внутрішньому полі.

main > div {
  height: 300px;
  width: 500px;
  overflow: auto;
  position: relative;
  top: 100px;
  left: 100px;
  overscroll-behavior-x: contain;
}