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

For anyone still stuck on this, this is the implementation I was able to come up with:

```typescript
export const scrollToElementWithCallback = (
  element: HTMLElement,
  callback: () => void,
  arg?: boolean | ScrollIntoViewOptions,
): void => {

  const eventListenerCB = () => {
    console.debug("scrollToElementWithCallback: Still scrolling");
    clearTimeout(timer);
    timer = setTimeout(timerCB, 50);
  };

  const timerCB = () => {
    console.debug(
      "scrollToElementWithCallback: Scrolling done, calling callback",
    );
    callback();
    document.removeEventListener("scroll", eventListenerCB);
  };

  let timer = setTimeout(timerCB, 50);

  document.addEventListener("scroll", eventListenerCB);

  element.scrollIntoView(arg);
};
```

Rationale behind this and implementation details

- Initial Setup:
  - Scroll Event Listener Registration:  
    When the function is called, it immediately attaches a `scroll` event listener (`eventListenerCB`) to the `document`.
  - Timer Initialization:  
    It also sets up a timer (`timer`) that is scheduled to execute the callback function (`timerCB`) after a specified delay (50 milliseconds by default).
  - Start Scrolling:  
    The `element.scrollIntoView(arg)` method is called to begin scrolling the target element into view.

- Scroll Event Listener Behavior:
  - Resetting the Timer:  
    Every time a scroll event is detected, the scroll event listener clears the existing timer and starts a new one. This resetting indicates that scrolling is still in progress.
  - Rationale:  
    As long as scrolling is occurring, scroll events will continue to fire. By resetting the timer with each scroll event, it's ensured that the callback is not called prematurely.

- Determining Scroll Completion:
  - Timer Expiration:  
    Once scrolling has stopped, no further scroll events will be fired. Consequently, the timer will not be reset and will eventually expire after the 50-millisecond delay.
  - Callback Execution:  
    When the timer expires, it calls the provided callback function.
  - Cleanup:  
    The scroll event listener is removed from the `document` to prevent unintended behavior.

Final Note

- Delay Before Callback:  
  The callback will be executed within a maximum of 50 milliseconds after scrolling has stopped (or whatever delay you choose). 
- Adjustable Timer:  
  The 50-millisecond delay is an arbitrary value that balances responsiveness with performance. You can adjust this value based on your specific requirements, but keep in mind that a shorter delay might lead to the callback being called prematurely and cause performance issues, while a longer delay could make the application feel less responsive.



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


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

Received on Friday, 1 November 2024 14:17:50 UTC