はじめに
画面をスクロールで、何かの要素が浮かび上がったり、反応する仕組みを、JQuery無しで作るのに、
具体的に要素がどのように判定されているのかを検証するものです。
また、動きの要素にコーディング終了後にクラスを付け加えることで、動きを一括して実装できるので
製作スピードが向上します。
動作デモ
See the Pen スクロール判定のデモ by masato yamada (@marchin133) on CodePen.
スクロールの計測
スクロールは window.pageYOffsetで取得。
判定したい要素の計測
getBoundingClientRect().topで、判定したい要素の上部の、HTMLの一番上からの高さがわかる。
判定ロジック
javascript
document.addEventListener("DOMContentLoaded",function(){letwindowHeight=document.getElementById('windowHeight');letscrollVolume=document.getElementById('scrollVolume');letmarkerLine=document.getElementById('markerLine');letmarkerLinetext=document.getElementById('markerLinetext');//動かす要素を探すletfadeConts=document.querySelectorAll('.anime');//動かす要素の配列を作るletmoveConts=[];//windowの高さ & リサイズされたら再取得letwindowH=window.innerHeight;window.addEventListener('resize',function(){windowH=window.innerHeight;windowHeight.textContent=windowH;},false);windowHeight.textContent=windowH;//動かす要素の位置情報を取得しておくfor(leti=0;i<fadeConts.length;i++){letrect=fadeConts[i].getBoundingClientRect().top;moveConts.push(rect);fadeConts[i].textContent=rect;}// marker// 画面の下からXpxのラインletmarkerLineVolume=windowH-(windowH/4);markerLinetext.textContent=markerLineVolume;markerLine.style.top=markerLineVolume+'px';//画面スクロールしたときに呼び出されるwindow.addEventListener('scroll',function(){//スクロール位置letscrollDepth=window.pageYOffset;scrollVolume.textContent=scrollDepth;//判定位置は、スクロール量に伴ってそのままずれるmarkerLine.style.top=markerLineVolume+scrollDepth+'px';//判定位置letmarkerLineNum=markerLineVolume+scrollDepth;for(i=0;i<moveConts.length;i++){if(markerLineNum>moveConts[i]){fadeConts[i].classList.add("show");console.log(i+"が超えた");//console.log(moveConts[0]);//console.log(windowHeight);//console.log(moveConts[i]);}else{//fadeConts[i].classList.remove("show");}}},false);},false);スクロール量の考え方
当たり前のようで、意外に私はハマってしまいました。
スクロール量と判定要素の関係から、画面に対して下にスクロール量が発生するような感覚だったのですが、
画面のウィンドウの上部にスクロール量が発生するイメージで考えるとわかりやすいです。
判定する要素が、ブラウザ画面の下端（実際には画面の比率などで判定位置は変わることが多いと思いますがそれも例には含めてあります）
に達しているということは、スクロール量だけでは足りず、スクロール量に、画面の高さを加えたものが、判定位置になります。
例：
判定位置の要素が、2000pxの位置に絶対位置で配置されているとする
画面の高さは、1200px（ブラウザの表示領域の高さ） の場合、800pxスクロールすると、判定位置の2000pxに達する。
