[amp-story-player] Forward scrolling touch events to parent window#31051
[amp-story-player] Forward scrolling touch events to parent window#31051Enriqe merged 12 commits intoampproject:masterfrom
Conversation
|
Oops, forgot to take into account when there's a page attachment. Will update it in a bit. |
|
Can you upload a demo? I'm curious to see how the no scroll inertia feels |
|
As discussed offline I will experiment manually adding some inertia and testing how if feels and interacts with regular scrolling outside the player. |
|
Hey @gmajoulet, @newmuis! These files were changed: |
|
I introduced the smooth scrolling that @gmajoulet recommended and tweaked it a bit. I still need to play a bit more with the parameters but it's looking good. Here is a demo if you want to try it out on a real device as well. https://temp-player.web.app/examples/amp-story/player-local-stories.html |
|
I've updated the PR with a new The basic principles of how it works are listed on the JSDoc. The implementation as well as the numbers are based from many different implementations/articles/papers I saw on the wild, so it might not feel as good as native scrolling, but it's as close as I could get while not complicating the code too much. It supports the following features from native scrolling:
It does NOT support:
The demo has been updated here (swipe to next story if you want to try out a story without a page attachment): https://temp-player.web.app/examples/amp-story/player-local-stories.html PTAL @gmajoulet |
|
Can you try the demo on Chrome mobile emulation? It doesn't really work for me :(( |
|
to @mszylkowski and @processprocess for the review if/once the demo works |
|
When I scroll the player just a few pixels, it scrolls the whole page all the way down as if I did a full scroll motion. Seems like the scroll makes the tap seem lower (because the page moves up) and takes that into the scroll... Does that happen for anyone else? |
|
Sorry, I think I changed something recently that broke chrome emulation (probably when testing with a real device). Will comment back when it's ready. |
…e scroll. fix types.
|
Ok, I think demo should be fixed. You might need to clear your cache if testing on a real device to get the latest changes. PTAL @processprocess @mszylkowski. |
|
The demo behavior is really great! I love that you can scroll to the end of the page attachment and then it scrolls the main page, just like a HTML scrollbox. |
…mpproject#31051) * forward scrolling to parent window * newline * only stop propagation and preventDefault at appropiate places * introduce smooth scrolling * clean up stoppropagation and prevent default logic * revert preventDefault changes * implement pageScroller with cubic bezier functions * change to easeOutQuartFn, add more docs * fix multiplier * use screenX/Y for horizontal swiping, clientX/Y for vertical. throttle scroll. fix types. * revert sample * fix type, revert cached winheight
Closes #28009
Forwards vertical touch events from the iframe into scroll events for the parent window in order to allow scrolling.
Works well except that inertia scrolling doesn't really work since we are setting the scrolling coordinates via JS.