この質問には30を超える回答があり、どれも私が使用していた驚くほどシンプルで純粋なJSソリューションを使用していません。他の多くが推進しているように、これを解決するためだけにjQueryをロードする必要はありません。
要素がビューポート内にあるかどうかを確認するには、最初にボディ内の要素の位置を決定する必要があります。以前考えていたように、これを再帰的に行う必要はありません。代わりに、を使用できますelement.getBoundingClientRect()
。
pos = elem.getBoundingClientRect().top - document.body.getBoundingClientRect().top;
この値は、オブジェクトの上部とボディの上部のY差です。
次に、要素がビュー内にあるかどうかを通知する必要があります。ほとんどの実装では、要素全体がビューポート内にあるかどうかを尋ねるので、これをカバーします。
まず、ウィンドウの一番上の位置はですwindow.scrollY
。
ウィンドウの高さを上部に追加することで、ウィンドウの下部を取得できます。
var window_bottom_position = window.scrollY + window.innerHeight;
要素の最上位を取得するための簡単な関数を作成しましょう:
function getElementWindowTop(elem){
return elem && typeof elem.getBoundingClientRect === 'function' ? elem.getBoundingClientRect().top - document.body.getBoundingClientRect().top : 0;
}
この関数は、ウィンドウ内での要素の一番上の位置を返す0
か、.getBoundingClientRect()
メソッドで要素以外のものを渡した場合に戻ります。この方法は古くからあるため、ブラウザがサポートしていないことを心配する必要はありません。
ここで、要素の最上位は次のとおりです。
var element_top_position = getElementWindowTop(element);
そして、または要素の一番下の位置は:
var element_bottom_position = element_top_position + element.clientHeight;
これで、要素の下部の位置がビューポートの上部の位置よりも低いかどうかを確認し、要素の上部の位置がビューポートの下部の位置よりも高いかどうかを確認することによって、要素がビューポート内にあるかどうかを判断できます。
if(element_bottom_position >= window.scrollY
&& element_top_position <= window_bottom_position){
//element is in view
else
//element is not in view
そこからin-view
、要素のクラスを追加または削除するロジックを実行できます。これは、CSSの遷移効果で後で処理できます。
私はこのソリューションを他に見つけられなかったことに本当に驚いていますが、これが最もクリーンで効果的なソリューションであり、jQueryをロードする必要がないと信じています!