Как я могу определить время события после анимации «scrollBehaviour: smooth»?

Question

Если для ScrollToOptions.behavior установлено значение «Сглаживать», браузер, поддерживающий , будет плавно прокручивать страницу для вас, но я не уверен, каково время анимации.Мне нужно переместить фокус после анимации (потому что выполнение этого перед скачком прокрутит и отменит анимацию).Если это всегда установленная продолжительность, я могу просто использовать это, но если это зависит от прокручиваемого расстояния или от браузера к браузеру, мне, возможно, придется придумать что-то более причудливое.

Чтобы сделать этоМне также может понадобиться найти способ проверить поддержку ScrollToOptions, хотя, по крайней мере, в Safari он просто не работает тихо

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

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

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

Answer 1

Поскольку window.scrollTo() испускает scroll события, как при прокрутке пользователя, можете ли вы создать собственное событие scrollend, отслеживая, когда обычное событие прокрутки прекращает излучаться?

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();