- From: Pieterjan via GitHub <sysbot+gh@w3.org>
- Date: Sat, 07 Oct 2023 13:15:19 +0000
- To: public-css-archive@w3.org
> What I shared above was working for me because Quasar was applying a fade-in transition when my target image came into view, which explains why it seemed to be firing a bit early.
>
> So I looked at how to watch for viewport changes, and here is a more generalized potential workaround for people. This solution uses [IntersectionObserver](https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserver) to watch for changes to the intersection (amount of overlap) between the target element (being scrolled into view) and the viewport:
>
> ```js
> const myElement = document.getElementById("x");
>
> const doSomething = (entries, observer) => {
> entries.forEach(entry => {
> if (entry.target === myElement && entry.intersectionRatio >= 0.90) {
>
> // The element is now fully visible
> console.log("Element is visible.")
>
> // Stop listening for intersection changes
> observer.disconnect();
>
> }
> });
> }
>
> let observer = new IntersectionObserver(doSomething, {
> root: null,
> rootMargin: '0px',
> threshold: 0.90,
> });
>
> observer.observe(myElement)
>
> myElement.scrollIntoView({ behavior: "smooth", block: "end" });
> ```
>
> Here is a jsfiddle: https://jsfiddle.net/04wo8cnr/
>
> You need to account for what portion ("threshold" in the code above) of your element is going to come into view by the time the scrollIntoView finishes. This may depend on the `block` option you set on `scrollIntoView`. Or an alternative would be to set it to a low threshold such as `0.01` and take action as soon as the element starts to come into view.
@guswelter Okay, nice try, but sadly this won't work when the element `window.scrollTo` or `element.scrollIntoView` calls on is already visible in the viewport...
https://stackblitz.com/edit/web-platform-mfafhv?file=index.html
--
GitHub Notification of comment by PieterjanDeClippel
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/3744#issuecomment-1751710432 using your GitHub account
--
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config
Received on Saturday, 7 October 2023 13:15:21 UTC