Amphtml: position-observer unable observe position of element outside the viewport

Created on 9 Jan 2019  路  2Comments  路  Source: ampproject/amphtml

Due to https://github.com/ampproject/amphtml/blob/5f75efe35b734a4fcf0884d373315de60cd42df9/src/service/position-observer/position-observer-worker.js#L103-L109

we've programmatically decided to pass a null positionRect if the element being observed is outside of the viewport. This makes it impractical to use position observer for observing if the bottom of an infinitely scrolling list is within X viewport heights of the current viewport.
Curious why this is the case and whether we can relax or adjust this constraint?

Context:
We're currently (intending to) using position observer to figure out if the bottom of an infinitely scrolling amp-list is within X viewports away from the current viewport in order to determine whether or not to fetch the next set of items. Setting the position observer on the list itself runs into the problem where the list currently does not shrink on changing src. So whenever we change src we can get into a situation where the bottom of the list elements is not the same as the bottom of the list, and we are therefore not triggering a load-more when we should be. We could fix this by attaching the position observer to an element at the end of the list children, but these elements would often be outside of the viewport.

Example here: https://coordinated-client.glitch.me/ (on mobile, scroll to load and then select a new tab).

DiscussioQuestion

All 2 comments

It's more of a privacy reason that we set positionRect to null when element get's out of viewport.

And the position observer is designed to determining high fidelity element's position when they are in viewport. There's some optimization I wish to add (but haven't ....) that to stop calculate position when it is far from viewport.

I'm happy to explore the use case more here. Does IntersectionObserver with rootMargin sounds like a better solution here?

Thanks a lot @zhouyx for the quick response and offline followup! Circling back here, the solution we ended up with (#20230) is to register a viewport.onScroll callback and measure the position of the out-of-viewport element with viewport.getClientRectAsync. This has the added benefit of being a lot less expensive, since this use case doesn't actually require a measurement every single animation frame.

Was this page helpful?
0 / 5 - 0 ratings