Re: [csswg-drafts] [css-overflow] set element as document scrolling element (#4710)

> By "locking the scroll of a parent page", you mean that scrolls don't bubble up to the parent? If so, this is quite easy now with `scroll-behavior: none`. Or am I misunderstanding the use case?

Currently if you want a menu or modal to lock the page scroll while being scrollable itself, you may need to perform the following steps:

1. You need to prevent scrolling of the document so two scrollbars do not inadvertently show up. (I haven't used `scroll-behavior: none` and I'm having trouble finding documentation for it, so it's hard to say if that meets this need.)
1. Some techniques for preventing document scrolling (such as `overflow: hidden` or `position: fixed` on the body) will also reset the user's scroll position, so you'll need to store that so you can restore it when closing the modal/dialog/menu.
1. If the document is still visible beneath the modal/dialog/menu, you will see a visible "jump" back to the top of the page when the menu is open as soon as its scroll is locked. In these cases, you might use `top` or `translateY` to visually offset the document body by the same amount as its former scroll position.
1. You then need to make sure the bounding box of your modal/dialog/menu is large enough that it will be intuitive to scroll. This often involves making a container that covers the entire viewport that is set to `overflow: auto`, then making the actual menu or modal box within it separate. (That way the user doesn't have to reach or move their cursor to a small area to scroll the content.)

But I really like @tabatkins' example, too, because it removes the "scroll-locking" part of the equation entirely. It's possible that I'm conflating the challenge of locking the page scroll with the challenge of having a child element function to the end user as the `document.scrollingElement`.

Would it help if I were to whip up some use case code examples?

-- 
GitHub Notification of comment by tylersticka
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/4710#issuecomment-579539756 using your GitHub account

Received on Wednesday, 29 January 2020 00:35:28 UTC