Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

✨ Bento Lightbox: scrollable feature #32145

Merged
merged 7 commits into from
Jan 26, 2021

Conversation

caroqliu
Copy link
Contributor

This PR implements the scrollable feature for Lightbox/amp-lightbox. Related to #31052.

Scrolling is allowed within the Lightbox with application of overflow: scroll as opposed to overflow: hidden. It also prevents scrolling beyond the Lightbox in the outer document with application of overscroll-behavior: none and overflow: scroll. It appears that overflow: hidden in combination with overscroll-behavior: none does not yield scroll containment due to over-scrolling not being possible given the lack of overflow.

Unfortunately, overscroll-behavior is only partially supported, so we may need to have more robust approaches such as adding an event listener to the element's root document which calls preventDefault on scroll when the Lightbox is open.

extensions/amp-lightbox/1.0/amp-lightbox.css Outdated Show resolved Hide resolved
extensions/amp-lightbox/1.0/lightbox.js Show resolved Hide resolved
id="lightbox"
layout="nodisplay"
animation={animation}
scrollable={scrollable}
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I don't see the attribute mapping anywhere.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

You mean in amp-lightbox.js? It was already there:

'scrollable': {attr: 'scrollable', type: 'boolean'},

@caroqliu
Copy link
Contributor Author

Merging since Circle CI and Travis are green, and the failing ampproject/tests/e2e (nomodule) entry appears to be linked to a stale run.

@caroqliu caroqliu merged commit 6aefa51 into ampproject:master Jan 26, 2021
PetrBlaha pushed a commit to PetrBlaha/amphtml that referenced this pull request Jan 28, 2021
* Fix type

* Support `scrollable` in Preact

* Support scrollable in AMP layer

* Update tests

* Add comments

* Remove root css

* Replace overflow: scroll with overflow: auto
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

3 participants