Re: [csswg-drafts] [cssom-view-1] Provide onAnimationEnd callback in scrollIntoView options (#3744)

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:

```javascript
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.

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


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Sunday, 12 February 2023 06:47:45 UTC