Question

将ScrollToOptions.behavior设置为“平滑”时，supporting browser将为您平滑地滚动页面，但是我不确定动画的时间是多少。我需要将焦点移到动画之后（因为在此之前进行操作会跳过滚动并取消动画）。如果始终是一个设置的持续时间，我可以使用它，但是如果它取决于滚动的距离或浏览器之间的变化，则可能需要弄清楚一些花哨的内容。

为此，我可能还需要找出一种检查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();

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

1 个答案: