Javascript 叠加滚动性能差，主体溢出隐藏在chrome上

如果显示覆盖，我想防止正文滚动。我对列表元素使用lazyload，这意味着滚动事件监听器需要一些时间。（替换为下面代码中的空循环。）

然而，在Windows（带touthpad）和Android上的Chrome 83中，设置

overflow:hidden

会导致overlay scroll性能不佳，或者至少不如另一个好，但Firefox Android看起来不错

overflow:hidden

有什么不同？如何防止性能影响

编辑：性能差意味着滚动时有明显的延迟。滚动不顺畅，可以感觉到内容跳跃，用户体验不好

文件
#滚动容器{
溢出y：滚动；
高度：100vh；
宽度：60vw；
背景色：aliceblue；
位置：固定；
排名：0；
右：0；
}
#身体内容{
背景色：仿古白色；
}
#拨动{
位置：固定；
顶部：1米；
左：1米；
}
const$=document.querySelector.bind（文档）；
window.addEventListener（“加载”，（）=>{
对于（[$（“#滚动内容”）、$（“#正文内容”）]的常量父项）{
for（设i=0；i<1000；i++）{
const p=document.createElement（“p”）；
p、 innerText=“段落”+i；
父母、子女（p）；
}
}
$（“#切换”）。addEventListener（'单击'，（）=>{
const current=$（'body'）.style.overflowY
$（'body'）.style.overflowY=当前？''hidden'
})
$（“#滚动容器”）.addEventListener（'scroll'，（）=>{
对于（设i=0；i<200000000；i++）；
})
});
切换溢出

无论何时显示/隐藏模式，都可以使用javascript为主体设置css，而无需使用

overflow

属性

// When the content is shown, we want a fixed body
document.body.style.position = 'fixed';
document.body.style.top = `-${window.scrollY}px`;

// When the content is hidden or closed...
const scrollY = document.body.style.top;
document.body.style.position = '';
document.body.style.top = '';
window.scrollTo(0, parseInt(scrollY || '0') * -1); 

---

当模态/叠加打开时，第二行代码捕获主体上的当前位置。否则，默认操作是在关闭时一直滚动到顶部。如果这是你想要的行为，请不要介意。第二组代码的大部分只是将视图移回

主体中的正确位置。如果您想让用户留在顶部，可以简化为只使用第二行。
只要显示/隐藏模式，就可以使用javascript为主体设置css，而无需使用
overflow
属性

// When the content is shown, we want a fixed body
document.body.style.position = 'fixed';
document.body.style.top = `-${window.scrollY}px`;

// When the content is hidden or closed...
const scrollY = document.body.style.top;
document.body.style.position = '';
document.body.style.top = '';
window.scrollTo(0, parseInt(scrollY || '0') * -1); 

当模态/叠加打开时，第二行代码捕获主体上的当前位置。否则，默认操作是在关闭时一直滚动到顶部。如果这是你想要的行为，请不要介意。第二组代码的大部分只是将视图移回
主体中的正确位置。如果你想让用户留在最上面，可以简化为只使用第二行。
我最终交换了第一行和第二行，这很有效！如果您能简单地解释一下
溢出
会影响性能的原因，我很乐意接受这个答案。@AllanChain我不确定您所说的“性能”是什么意思。。。要么滚动，要么不滚动。
overflow:hidden
属性不允许滚动。当您希望能够滚动元素的内容时，请使用
overflow:scroll
。这可能是因为您的懒虫在滚动时不断调整内容的大小。尝试使用承诺加载您的项目，然后在准备好内容后立即将它们全部添加进去。对于大量数据，移动设备中较小的处理器将需要更长的时间来处理。任何超过这一点的事情都超出了您最初问题的范围。FFR，每个帖子你应该问一个问题，以免mods标记你，或者你仍然误解了我。。。我的意思是它是平滑的，没有溢出隐藏，而它不是平滑的，有溢出隐藏。不管怎样，它是有效的，我会接受这个答案。我最终交换了第一行和第二行，它是有效的！如果您能简单地解释一下
溢出
会影响性能的原因，我很乐意接受这个答案。@AllanChain我不确定您所说的“性能”是什么意思。。。要么滚动，要么不滚动。
overflow:hidden
属性不允许滚动。当您希望能够滚动元素的内容时，请使用
overflow:scroll
。这可能是因为您的懒虫在滚动时不断调整内容的大小。尝试使用承诺加载您的项目，然后在准备好内容后立即将它们全部添加进去。对于大量数据，移动设备中较小的处理器将需要更长的时间来处理。任何超过这一点的事情都超出了您最初问题的范围。FFR，每个帖子你应该问一个问题，以免mods标记你，或者你仍然误解了我。。。我的意思是它是平滑的，没有溢出隐藏，而它不是平滑的，有溢出隐藏。不管怎样，它是有效的，我会接受这个答案。