[csswg-drafts] [cssom-view-1] What happens when the user tries to scroll during an oingoing smooth scroll? (#13462)

nicolo-ribaudo has just created a new issue for https://github.com/w3c/csswg-drafts:

== [cssom-view-1] What happens when the user tries to scroll during an oingoing smooth scroll? ==
Consider an element that is being smooth-scrolled due to a `.scrollTo({..., behavior: "smooth" })` call. While the element is scrolling, the user tries to scroll in the opposite direction with their mouse wheel.

1. Is the smooth scroll aborted? https://drafts.csswg.org/cssom-view/#smooth-scroll-aborted says that "a smooth scroll can be aborted by the user", but it doesn't have any example of how this would happen. The spec only actually aborts a smooth scroll when there is another JS-initiated scroll.
2. Or is the smooth scroll completed, thus firing the `scrollend` event?

- Firefox seems to do (2) (it fires a `scrollend` event, and then handles the user scroll)
- Chrome fires a `scrollend` event and then continues scrolling in the `.scrollTo` direction, so it neither actually completes it nor aborts it. It then fires a second `scrollend` event after the element reaches the `.scrollTo` position. Maybe the first `scrollend` event is for the user-initiates scroll that is immediately completed as there is already a JS-initiated scroll going on?
- Safari also seems to ignore the user-initiated scroll, but it only fires a `scrollend` event at the end of the whole operation.

This is the test case that I'm using. I click on the div and then immediately try to scroll up:
```html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="outer" style="width: 200px; height: 200px; overflow-y: scroll;">
    <div id="inner" style="height: 10000px; background-image: linear-gradient(89deg, black, black 50%, white 50%, white)"></div>
  </div>
  <script>
    const outer = document.getElementById('outer');
    const inner = document.getElementById('inner');

    let to = 10_000;

    outer.addEventListener('click', () => {
      outer.scrollBy({ top: to, behavior: 'smooth' });
    });

    outer.addEventListener("scroll", () => {
      console.log("scroll", outer.scrollTop);
    })

    outer.addEventListener("scrollend", (e) => {
      console.log("scrollend", outer.scrollTop, e);
    })

    outer.addEventListener("wheel", (e) => {
      console.log("wheel", e.deltaY);
    })
  </script>
</body>
</html>
```



Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/13462 using your GitHub account


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

Received on Friday, 6 February 2026 14:05:25 UTC