Prevent scroll bleed in the inserter

[jasmussen]

Scroll bleed is when you scroll to the end of a scrollable element and start scrolling the element below it. The inserter has it. We should look at how to best prevent this.

Here are a few ways to do it:

https://codepen.io/joen/pen/wGbBoe
https://codepen.io/joen/pen/wGLjWG
https://codepen.io/joen/pen/dMEyjr
https://codepen.io/joen/pen/Kzjgqy
https://codepen.io/joen/pen/wGONLB

Which ever we pick here, it's likely a function we'd want to be able to reuse, as this issue is likely to pop up in many areas.

Please see this comment for a much better approach.

[BE-Webdesign]

For the most part #578 fixes this as well. I will touch it up to make the scrolling in the container a little better hopefully soon.

[jasmussen]

So, I think I've found the path forward for how to prevent scroll bleed.

As it turns out, WordPress already has a pretty remarkable body class called modal-open, which does exactly what we need. It locks the body content in place at its scroll position, and it prevents further scrolling. That means if you've scrolled halfway down the page, then apply modal-open, you can scroll no further, but you also don't lose your place.

It's kind of magic, and it means all we have to do in order to prevent scroll bleed is apply that class to body when we want just an element to scroll, and remove it once we want to unlock scrolling again.

I would suggest we apply it to:

• Sidebar on mobile
• Sidebar on desktop, on hover
• Inserter, mobile and desktop

Note to self, I need to look into the CSS that powers this. It is strong voodoo.

You can test the behavior already. Just scroll down the page to an image, click the edit button and see the media modal appear. Notice how the scrollbars are locked, but that you don't lose your place, and they are unlocked when you close the modal again.

Edit: Actually I forgot about the jog that the scrollbar makes. It seems like without some way to account for that, this is only good for mobile. :sadface: