如何在“ scrollBehaviour：平稳”动画之后安排事件发生的时间？

Question

When ScrollToOptions.behavior is set to 'smooth', a supporting browser will smoothly scroll the page for you, but I am not sure what the timing of the animation is. I need to move focus after the animation (because doing it before will jump the scroll and cancel the animation). If it's always a set duration I can just use that, but if it depends on the distance scrolled or changes from browser to browser, I might have to figure out something a little more fancy.

In order to do this I might also need to figure out a way to check for ScrollToOptions support, though at least in Safari it just fails silently

  if (options.smooth) {
    let scrollTiming = 250; // ?????

    window.scrollTo({
      top: element.offsetTop - fixedOverlay,
      behavior: 'smooth'
    });

    setTimeout(function() {
      element.focus();
    }, scrollTiming);
  } else {
    element.focus();
  }

Answer 1

Since window.scrollTo() emit scroll events just like when user scrolls, could you create a custom scrollend event by tracking when the regular scroll event stop being emitted?

const removeScrollEndListener = (function() {
  let timer = null;
  const event = new Event('scrollend');

  const attachEvent = () => {
    clearTimeout(timer);
    timer = setTimeout(() => {window.dispatchEvent(event)}, 100)};

  window.addEventListener('scroll', attachEvent);

  return window.removeEventListener.bind(window, 'scroll', attachEvent);
})();

window.addEventListener('scrollend', () => {
  console.log(`scroll end, ${window.scrollY}`)
})

// later, remove custom event
removeScrollEndListener();