如果显示覆盖，我想防止正文滚动。我对列表元素使用lazylod，这意味着滚动事件监听器需要一段时间。(替换为下面代码中的空循环。(
然而，在Windows(带touthpad(和Android上的Chrome 83中，设置overflow: hidden会导致覆盖滚动性能较差，或者至少不如其他版本，但Firefox Android似乎不错。
overflow: hidden如何发挥作用？如何防止性能受到影响？
编辑：性能差意味着滚动时有明显的延迟。滚动不流畅，你可以感觉到内容跳跃，这是糟糕的用户体验。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
#scroll-container {
overflow-y: scroll;
height: 100vh;
width: 60vw;
background-color: aliceblue;
position: fixed;
top: 0;
right: 0;
}
#body-content {
background-color: antiquewhite;
}
#toggle {
position: fixed;
top: 1em;
left: 1em;
}
</style>
<script>
const $ = document.querySelector.bind(document);
window.addEventListener("load", () => {
for (const parent of [$("#scroll-content"), $("#body-content")]) {
for (let i = 0; i < 1000; i++) {
const p = document.createElement("p");
p.innerText = "paragraph" + i;
parent.appendChild(p);
}
}
$('#toggle').addEventListener('click', () => {
const current = $('body').style.overflowY
$('body').style.overflowY = current ? '' : 'hidden'
})
$('#scroll-container').addEventListener('scroll', () => {
for (let i = 0; i < 200000000; i++);
})
});
</script>
</head>
<body>
<div id="body-content"></div>
<button id="toggle">Toggle Overflow</button>
<div id="scroll-container">
<div id="scroll-content"></div>
</div>
</body>
</html>
无论何时显示/隐藏模态，都可以使用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);
当模态/覆盖打开时，第二行代码捕获body上的当前位置。否则，默认操作是在关闭时一直滚动到顶部。如果这是你想要的行为，可以随意忽略。第二组代码的大部分只是将视图移回body中的正确位置。如果你想让用户留在顶部，可以简化为只使用第二行。