Warning: file_get_contents(/data/phpspider/zhask/data//catemap/9/javascript/375.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript 如何确定事件发生在';滚动行为:平滑';动画_Javascript_Animation_Scroll - Fatal编程技术网

Javascript 如何确定事件发生在';滚动行为:平滑';动画

Javascript 如何确定事件发生在';滚动行为:平滑';动画,javascript,animation,scroll,Javascript,Animation,Scroll,当设置为“平滑”时,a将为您平滑地滚动页面,但我不确定动画的计时是什么。我需要在动画之后移动焦点(因为在之前这样做会跳过滚动并取消动画)。如果它总是一个固定的持续时间,我就可以使用它,但是如果它取决于滚动的距离或者浏览器之间的变化,我可能不得不想出一些更奇特的东西 为了做到这一点,我可能还需要找到一种检查ScrollToOptions支持的方法,尽管至少在Safari中它只是默默地失败了 if (options.smooth) { let scrollTiming = 250; //

当设置为“平滑”时,a将为您平滑地滚动页面,但我不确定动画的计时是什么。我需要在动画之后移动焦点(因为在之前这样做会跳过滚动并取消动画)。如果它总是一个固定的持续时间,我就可以使用它,但是如果它取决于滚动的距离或者浏览器之间的变化,我可能不得不想出一些更奇特的东西

为了做到这一点,我可能还需要找到一种检查ScrollToOptions支持的方法,尽管至少在Safari中它只是默默地失败了

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

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

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

由于
window.scrollTo()
emit
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();

除了这里的答案,我想不出别的答案: