search

flekschas / svelte-simple-modal

A simple, small, and content-agnostic modal for Svelte v3 and v4
https://svelte.dev/repl/b95ce66b0ef34064a34afc5c0249f313
MIT License
422 stars 31 forks source link

Undesirable scroll on page below the modal #28

Closed mquandalle closed 3 years ago

mquandalle commented 3 years ago

First of all thank you very much for this well designed Modal component. I've been able to use it very easily to implement the “route as modal” pattern that I have found much more difficult to work with using React librairies.

When a modal is opened the page below the modal keeps the “scroll focus” (on both desktop using the mouse or on mobile). This is undesirable espacilly if there are some elements to interact with within the modal (a slider in my case).

flekschas commented 3 years ago

Thanks for bringing this up.

Just to clarify with "scroll focus" you mean the user can still scroll the content below the modal?

I guess one way to block this would be to catch events on the background element and prevent them from bubbling further. I am wondering if this could have any negative side effects.

mquandalle commented 3 years ago

Yes, I mean scrolling the content below the modal.

I think it’s a classical issues with modals implementations, this article describe some possible solutions.

flekschas commented 3 years ago

Thanks for linking the article. Their solutions sounds elegant. I'll try to integrate in the near future. If it's super urgent please feel free to take a stab at it and submit a PR (or even just an update to https://svelte.dev/repl/033e824fad0a4e34907666e7196caec4?version=3.20.1). I am happy to merge it.

flekschas commented 3 years ago

Closed via #31