hzdg / hz-core

HZ's internal library of React Components 🚧
https://hz-core.netlify.com
0 stars 0 forks source link

Extract useScrollBlocker hook from 2U #46

Open lettertwo opened 4 years ago

lettertwo commented 4 years ago

Is your feature request related to a problem? Please describe.

In UIs that present 'modal' or 'popover' behavior, there is often scrollable content behind the overlay. If the user performs scrolling input while the modal is displayed, it may cause the underlying content to scroll, causing disorientation and confusion.

2U has a hook that prevents scroll behavior on the document when passed a truthy value. This could be a building block for modal behaviors—a simple solution for an important detail that is easy to overlook.

Describe the solution you'd like

Extract and package 2U's useScrollBlocker hook

Note that, as implemented, this may not be robust enough for general use cases. We may need to consider API for specifying the scrollable element to block, and or for finding the nearest scrollable container to an element.

Describe alternatives you've considered

🤔

Additional context