search

willmcpo / body-scroll-lock

Body scroll locking that just works with everything 😏
MIT License
4.04k stars 338 forks source link

Define a custom base element (not body) #260

Closed kalnode closed 1 year ago

kalnode commented 1 year ago

Hello!

Is it possible to define a top-level locking target other than body ?

Context: I use a popular web app framework (for various reasons) which abstracts many things. The end result is the app is completely contained in a child of body, therefore any changes this plugin makes to body have no effect. Body is literally 100% screen width and height. The actual page content that should scroll (and be locked/unlocked), is yet in a deeper child.

To confirm the situation in my app, using a browser inspector, I manually toggled overflow auto/hidden on body and it had no effect on the app content. Meanwhile if I do the same on the child element that contains the app, then it works as expected. I just need this plugin to integrate with a base element different than body.

kalnode commented 1 year ago

In hindsight I realize this isn't actually a problem.

This plugin operating on body is fine and desired (to counteract spring effects on mobile devices, for instance). When it comes to other UI layers in the app, then I simply need to manually toggle overflow for those areas in addition to using this plugin. All of that logic should be contained in some custom "lockScrolling" component.