为了在我的抽屉菜单处于打开状态时为移动用户打造一个不错的用户体验,我在App容器上设置了overflow: hidden
和height: 100vh
(除抽屉外的所有内容)在抽屉打开时无法滚动。直到手动滚动才能在Chrome上以编程方式滚动
通常情况下,一旦删除了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是否不更新其滚动位置的内部知识?
你可以创建一个plunker吗?我没有成功重新创建[场景](https://plnkr.co/edit/ke5FScRpxjLHwI2MzNwW?p=preview) –