在手动滚动

Question

为了在我的侧抽屉菜单打开时为移动用户创建一个漂亮的用户体验，我在应用程序容器上设置overflow: hidden和height: 100vh（除了抽屉以外的所有内容）以便它＃39;抽屉打开时无法滚动。

通常，删除overflow和height属性后，窗口将跳回到屏幕顶部。为了避免这种情况，我保存了原始滚动位置（在抽屉之前），然后在抽屉用window.scrollTo(0, pos)关闭时将其设置回来。

我注意到，在您手动滚动之前，Chrome无法以编程方式滚动。我通过运行测试了这个：

if (!drawerIsOpen && drawerIsClosing) {
  let done = false;
  const interval = setInterval(() => {
    if (window.scrollY !== this.props.store.app.scrollPosition) {
      console.log('attempting');
      window.scrollTo(0, this.props.store.app.scrollPosition);
    } else {
      clearInterval(interval);
    }
  }, 50);
}

该间隔将永久运行，但是第二次手动滚动窗口，Chrome将能够以编程方式滚动，间隔将停止。我已经使用Safari和Firefox对此进行了测试，但他们没有显示此行为。

这与哪个元素有焦点有关？在用户以某种方式与网页进行互动之前，Chrome是否不会更新其滚动位置的内部知识？

Answer 1

我最终使用的是window.scrollBy(0, scrollPosition)，它似乎没有出现与window.scrollTo()或document.body.scrollTop相同的问题。