can anyone please explain, why is the first example faster when scrolling down
than the second one? Seems like the 2nd example is re-rendering the rows as I scroll down.
It’s only noticeable when you grab the scroll handle and scroll the table way down to the bottom. In example #2 you should see white stripes / or empty space in the lower part of the table.
The only difference between these two, is the "height" property in container.
Example 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>Example 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>
2
Answers
It is because of the rendering and layout calculation behavior of the browser. In the first example you set the height of the container to a fixed value which is 90 percent of the view port. Hence, browser is able to optimize the rendering process because it has a fixed height.
In the second example, you set the height of container 100% of the parent component which may change as you scroll. Hence, browser needs to re-calculate the height of component more frequently and it forces rows to be re-rendered.
That’s why as you scroll faster you see it is re-rendering the rows.
Your 100% is not doing what you think. The 100% just ends up been the full document, you can see this if you scroll down to the bottom of your second snippet, look at the scroll bars, do you see something odd?. You can make the 100% work as expected by giving the body element a fixed height.
If you make the body a fixed height, you will then see the 100% does what you expect. In fact change it to 50%, and it will do what you expect, change your second snippet to 50% and it will seem like nothing changed.
eg.