Dealing with overscroll behaviour on Chrome

When you use your phone and you reach the top of website you should be familiar with the above behaviour. According to Google this is called browser overscroll and there is a way to control how it behaves with CSS.

#modal {
  overscroll-behavior: contain;
}

When overscroll-behavior is added to an internal element the scrolling action will not be chained up to the parent. So for my problem in which I have a modal that is fixed and has a longer height then the body content. I do not want the browser to handle my over-scroll behaviour on this element. This stops my rubber-banding issues.

Another cool example from the spec is when you have a infinite scroller element and you just want to turn off all browser overscroll behaviour so you don’t make the confusing rubber banding effect in addition to scroll chaining.

#infinite_scroller {
  overscroll-behavior-y: none;
}

While adoption of this spec is available on Firefox and Chrome, Safari currently has no plans of adopting this rule yet. heres the can i use page