I have used will-change: transform on a parent element which has made scrolling smooth. But there are some child divs that don't have the static position anymore despite using position: fixed.
For the demonstration, I have created this basic webpage.
Note when I scroll down the red box, the yellow and green boxes go out of the viewport.
Code:
<style>
.app {
background: silver;
width: 100%;
height: 100%;
overflow-y: scroll;
z-index: 99;
will-change: transform;
}
.yellow-box-left .green-box-right {
width: 250px;
max-width: 250px;
}
.yellow-box-left {
position: fixed;
left: 0px;
top: 0px;
background: yellow;
}
.green-box-right {
position: fixed;
right: 0px;
top: 0px;
background: greenyellow;
}
.red-box-middle {
min-height: 100%;
margin-right: 250px;
margin-left: 250px;
position: relative;
background: indianred;
}
</style>
<html>
<div class="app">
<div class="yellow-box-left">
<!-- A list of words -->
</div>
<div class="red-box-middle">
<!-- A long list to make this scrollable -->
</div>
<div class="green-box-right">
<!-- A list of words -->
</div>
</div>
</html>
How can I keep these child divs in a fixed position?
For the example you provided, I managed to fix it by moving the
will-change: transformto.red-box-middle.