只要父级可见，如何使子级在视口中

Question

I have 2 similar parent with a height of 400vh. And inside of both I have a children of height: 100vh; width: 100% height: 100vh; width: 100% .

This is an example

 #parent { height: 400vh; background: green; padding: 1rem; &.2 { background: blue; } } #children { height: 100vh; background: red; }

 <div id="parent"> <div id="children"> children content </div> </div> <div id="parent" style="background: blue"> <div id="children"> children content </div> </div>

But i want the children to always be in the viewport as long as the parent is displayed. To be clearer, i want the children to move inside the parent to be always visible but it stops at the bottom of the parent.

This is an example of how I want it to work

 body { margin: 0; padding: 0; } #parent { background: green; height: 400vh; padding: 2.5vw; } #children { width: 90vw; height: 90vh; background: red; position: fixed; }

 <div id="parent"> <div id="children"> chidren-content <div /> </div>

But I can't do that with multiple parent's because of the fixed property. I have tried to replace it with JS when the children is almost at the end of the parent but it does weird things.

So anyone have an idea to do that with multiple parents?

Answer 1

I have 2 similar parent with a height of 400vh. And inside of both I have a children of height: 100vh; width: 100% height: 100vh; width: 100% .

This is an example

 #parent { height: 400vh; background: green; padding: 1rem; &.2 { background: blue; } } #children { height: 100vh; background: red; }

 <div id="parent"> <div id="children"> children content </div> </div> <div id="parent" style="background: blue"> <div id="children"> children content </div> </div>

But i want the children to always be in the viewport as long as the parent is displayed. To be clearer, i want the children to move inside the parent to be always visible but it stops at the bottom of the parent.

This is an example of how I want it to work

 body { margin: 0; padding: 0; } #parent { background: green; height: 400vh; padding: 2.5vw; } #children { width: 90vw; height: 90vh; background: red; position: fixed; }

 <div id="parent"> <div id="children"> chidren-content <div /> </div>

But I can't do that with multiple parent's because of the fixed property. I have tried to replace it with JS when the children is almost at the end of the parent but it does weird things.

So anyone have an idea to do that with multiple parents?