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

If you are looking for a promise based workaround, we can use the @guswelter solution inside a promise.


 ```
    element.scrollIntoView({ behavior: 'smooth' });

    await new Promise(resolve => {
      new IntersectionObserver(
        (entries, observer) => {
          for (const entry of entries) {

            if (entry.target === element && entry.intersectionRatio >= 0.90) {
              observer.disconnect();
              resolve();
            }
          }
        }
      ).observe(element)
    });
```


I have a scroll based tab-content system and was looking for a way to set and attribute hidden to apply `visibility: hidden;` for the content that were not visible so the TAB focus behaviour could ignore the other content and thanks to @guswelter solution applied inside Promise I could reach a satisfactory solution.


```
  async focusContent(index) {
    const focusContentElement = this.shadowRoot!.querySelector(
      `#content > :nth-child(${index + 1})`
    );

    focusContentElement.removeAttribute('hidden');

    focusContentElement.scrollIntoView({ behavior: 'smooth' });

    await new Promise(resolve => {
      new IntersectionObserver(
        (entries, observer) => {
          for (const entry of entries) {

            if (entry.target === focusContentElement && entry.intersectionRatio >= 0.90) {
              observer.disconnect();
              resolve();
            }
          }
        }
      ).observe(focusContentElement)
    });

    const otherContentElementList = this.shadowRoot!.querySelectorAll(
      `#content > :not(:nth-child(${index + 1}))`
    );

    for (const contentElement of otherContentElementList) {
      contentElement.setAttribute('hidden', '');
    }

    this.dispatchEvent(new CustomEvent('tab-changed'));
    this.dispatchEvent(new CustomEvent('content-changed'));
  }

```


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


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

Received on Tuesday, 27 June 2023 22:58:16 UTC