javascript - 如何防止用户中断 window.scrollTo()？

Question

我有一段使用 的代码window.scrollTo()，我想阻止用户中断滚动直到它完成。

let isMoving = false;

const scroll_keys = { 37: 1, 38: 1, 39: 1, 40: 1 };

preventDefault = e => {
  console.log(isMoving);
  if (!isMoving) return;
  e = e || window.event;
  if (e.preventDefault) e.preventDefault();
  e.returnValue = false;
};

preventDefaultForScrollKeys = e => {
  if (!isMoving) return;
  if (keys[e.keyCode]) {
    preventDefault(e);
    return false;
  }
};

document.addEventListener('wheel', preventDefault, { passive: false });
document.addEventListener('DOMMouseScroll', preventDefault, { passive: false });
document.addEventListener('scroll', preventDefault, { passive: false });
window.ontouchmove = preventDefault;
document.onkeydown = preventDefaultForScrollKeys;

function scrollTo(offset, callback) {
  const onScroll = () => {
    const scrollTop = window.scrollTop || window.pageYOffset;

    if (scrollTop === offset) {
      window.removeEventListener('scroll', onScroll);
      callback();
    }
  };
  window.addEventListener('scroll', onScroll);

  onScroll();
  window.scrollTo({
    top: offset,
    behavior: 'smooth',
  });
}

我isMoving = true在调用之前window.scrollTo设置，并在回调中将其设置回 false，如下所示：

isMoving = true; scrollTo(0, () => { isMoving = false; });

我希望这可以完全防止用户中断滚动，但它不能正常工作。它似乎有效，但并非每次都有效，而且看起来很麻烦。

标签： javascriptscroll