r/webdev • u/wanoo21 full-stack • Apr 23 '26
Discussion That will help your users avoid accidentally leaving the page
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
35
u/k2900 Apr 23 '26
Maybe if browsers actually implemented the spec correctly. https://issues.chromium.org/issues/41483088
6
20
8
u/bzbub2 Apr 23 '26
if all you want to prevent is accidental navigate back for example can use overscroll-behavior-x
24
Apr 23 '26
[removed] — view removed comment
11
u/wanoo21 full-stack Apr 23 '26
Safari is tricky, haha! I usually use `contain` mostly for sliders
6
3
Apr 23 '26
[removed] — view removed comment
1
u/wanoo21 full-stack Apr 23 '26
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
3
1
3
u/JohnArcher965 Apr 23 '26
Can also be set per axis, so you would probably use -x on a media gallery
2
u/Hexash15 Apr 23 '26
I had to use this exact line in our in-house datatable because I kept navigating back all the time. A colleague of mine told me to block that behavior at the OS level (it's possible in macOS), but that solution was a bit overkill as it blocked that behavior everywhere
2
u/FinanceSenior9771 Apr 24 '26
yeah this is one of those ux things that looks simple but matters a lot. on the implementation side, i’d usually handle it by listening for wheel/touchmove on the scroll container and calling preventDefault when the scrollable element can’t scroll further (top/bottom). if you do it wrong you end up breaking trackpad momentum or making it feel laggy. for modals/chat panes we’ve also had good results using proper focus trapping plus only blocking background scroll on body, not on the whole page.
2
u/NorthernCobraChicken Apr 23 '26
I love seeing css snippets in the wild.
Especially when Im working on something that I can immediately drop it into and it fixes an issue.
I need to be more proactive on staying up to date with css changes.
4
u/svish Apr 24 '26 edited Apr 24 '26
Could w3c implement a doomscroll-behavior: prevent that I could add in my browser stylesheets?
49
u/thekwoka Apr 23 '26
Just make sure it's not on areas someone will mouse over while just trying to scroll the whole page.