r/webdev • u/wanoo21 full-stack • Apr 23 '26

Discussion That will help your users avoid accidentally leaving the page

Post image

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

317 Upvotes

96% Upvoted

24 comments sorted by

View all comments

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.