任何人都可以解释一下，为什么第一个示例向下滚动时速度更快 比第二个？似乎第二个示例在我向下滚动时重新渲染行。
只有当您抓住滚动手柄并将表格向下滚动到底部时才会注意到。在示例 #2 中，您应该在表格下部看到白色条纹/或空白区域。
两者之间的唯一区别是容器中的“高度”属性。
示例1
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flex Grid with Floating Header</title>
<style>
.container {
display: flex;
flex-direction: column;
overflow: auto;
height: 90vh;
}
.header {
display: flex;
position: sticky;
top: 0;
background-color: #f1f1f1;
z-index: 1;
}
.header div {
flex: 1;
padding: 10px;
border: 1px solid #ccc;
text-align: center;
}
.grid {
display: flex;
flex-direction: column;
}
.row {
display: flex;
}
.row div {
flex: 1;
padding: 10px;
border: 1px solid #ccc;
text-align: center;
}
.header div:first-child, .cell:first-child {
color: white;
}
</style>
</head>
<body>
<div class="container">
<div>
<div>
<div class="header">
<script>
for (let j = 0; j < 50; j++) {
document.write(`
<div>
<span> Header ${(j + 1)} </span>
</div>
`);
}
</script>
</div>
<div class="table__body">
<div class="rows">
<!-- Generate 1000 rows -->
<script>
for (let i = 1; i <= 2000; i++) {
document.write('<div class="row">');
for (let j = 1; j <= 60; j++) {
document.write('<div>Row ' + i + ' Col ' + j + '</div>');
}
document.write('</div>');
}
</script>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>示例2
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flex Grid with Floating Header</title>
<style>
.container {
display: flex;
flex-direction: column;
overflow: auto;
height: 100%;
}
.header {
display: flex;
position: sticky;
top: 0;
background-color: #f1f1f1;
z-index: 1;
}
.header div {
flex: 1;
padding: 10px;
border: 1px solid #ccc;
text-align: center;
}
.grid {
display: flex;
flex-direction: column;
}
.row {
display: flex;
}
.row div {
flex: 1;
padding: 10px;
border: 1px solid #ccc;
text-align: center;
}
.header div:first-child, .cell:first-child {
color: white;
}
</style>
</head>
<body>
<div class="container">
<div>
<div>
<div class="header">
<script>
for (let j = 0; j < 50; j++) {
document.write(`
<div>
<span> Header ${(j + 1)} </span>
</div>
`);
}
</script>
</div>
<div class="table__body">
<div class="rows">
<!-- Generate 1000 rows -->
<script>
for (let i = 1; i <= 2000; i++) {
document.write('<div class="row">');
for (let j = 1; j <= 60; j++) {
document.write('<div>Row ' + i + ' Col ' + j + '</div>');
}
document.write('</div>');
}
</script>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>是因为浏览器的渲染和布局计算行为。在第一个示例中，您将容器的高度设置为固定值，即视口的 90%。因此，浏览器能够优化渲染过程，因为它具有固定的高度。
在第二个示例中，您将容器的高度设置为父组件的 100%，该高度可能会随着滚动而改变。因此，浏览器需要更频繁地重新计算组件的高度，并强制重新渲染行。
这就是为什么当您滚动得更快时，您会看到它正在重新渲染行。