只要父級可見，如何使子級在視口中

Question

我有 2 個相似的父母，身高為 400vh。 在兩者里面我有一個height: 100vh; width: 100% height: 100vh; width: 100% 。

這是一個例子

 #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>

但我希望孩子們總是在視口中，只要顯示父母。 更清楚地說，我希望孩子們在父母內部移動以始終可見，但它停在父母的底部。

這是我希望它如何工作的一個例子

 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>

但是由於固定屬性，我不能對多個父母這樣做。 當孩子幾乎在父母的末尾時，我試圖用 JS 替換它，但它會做一些奇怪的事情。

所以有人有想法和多個父母一起做嗎？

Answer 1

我有 2 個相似的父母，身高為 400vh。 在兩者里面我有一個height: 100vh; width: 100% height: 100vh; width: 100% 。

這是一個例子

 #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>

但我希望孩子們總是在視口中，只要顯示父母。 更清楚地說，我希望孩子們在父母內部移動以始終可見，但它停在父母的底部。

這是我希望它如何工作的一個例子

 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>

但是由於固定屬性，我不能對多個父母這樣做。 當孩子幾乎在父母的末尾時，我試圖用 JS 替換它，但它會做一些奇怪的事情。

所以有人有想法和多個父母一起做嗎？