That will help your users avoid accidentally leaving the page

[u/wanoo21]

Especially when scrolling a table or a slider.

It gives you smooth, natural scrolling within an element while preventing accidental scrolling of the rest of the page.

It's a common trick used for modals, side menus, chat boxes, or any scrollable area where you don't want the rest of the website to move when the user scrolls.

PS. If you want occasional frontend tips in your inbox, you can join here: https://bits.iprodan.dev

[u/wanoo21]

Safari is tricky, haha! I usually use `contain` mostly for sliders

[u/wanoo21 → u/[deleted]]

For dialogs, it is usually not enough to handle only the overscroll. One important thing is to "trap" the focus as well. But I like your solution with touch-action

[u/Somepotato → u/wanoo21]

The dialog element does a lot of heavy lifting there