問題タブ [animate-on-scroll]
For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.
html - 親 div の高さを 1 つの (複数の) 子要素の高さに設定する方法
私のウェブサイトのホームページでは、animate-on-scroll ライブラリを使用して、スクロール ダウン中にページのさまざまな部分を表示しています。親 div の最初の高さを最初の子 div ( .intro) にするだけです。下にスクロールすると、ボックスの高さがコンテンツ全体の高さに合わせて拡張されます。
スクロール後に高さを 100% に変更する Vue.js の動的クラス バインディングを使用して、部分的に動作します。しかし、最初の高さを絶対値に設定した場合にのみ正しく取得できますが、これは私が望むものではありません。
初期の高さをさまざまなパーセンテージ (1 から 99% までのすべて) に設定しようとしましたが、何もしません。使用するheight: 70vhことは私が解決策に最も近い方法ですが、これでもさまざまな画面サイズで問題が発生します。
display: none他の子 div (.aboutおよび) を使用.workすると、高さの問題は解決しますが、さまざまなメソッドとアニメーションをトリガーするためにすべての非表示のコンテンツをページに残す必要があるため、これを使用できません。
親の高さを最初の子divの高さに一致させることができる、より応答性の高いソリューションが本当に欲しいです。CSSだけでこれを行う方法はありますか？それとも、Vue.js や Javascript を使用するのでしょうか?