2016年3月8日火曜日

getBoundingClientRect() を利用して、スクロールの最後に、要素を追加

getBoundingClientRect() を利用して、スクロールの最後に、要素を追加

手順

1.    lastElementChild の getBoundingClientRect().top を所得
2.    window.innerHeight 高さを所得
3.    window.onscroll で window.innerHeight と getBoundingClientRect().top
      の位置を計算します。
4.    getBoundingClientRect().top は window.innerHeight + 100(約) の以内
      にスクロールされた時、要素を追加します。


          if(lll.getBoundingClientRect().top < innerHeight +100){
                qqq();
        }

        OR

          if(lll.getBoundingClientRect().top < innerHeight - 200){
                qqq();
        }


注意:
   innerHeight - 200 に設定した時に lastElementChild は -200までスクロール
が必要です。


 getBoundingClientRect()  高さの計算位置。

動作の結果





<html>
<body style="padding: 0px; margin: 0px; ">
<div id = "a"></div>
<div id = "b">getBoundingClientRect() を利用して、スクロールの最後に、要素を追加します。</div>
</body>
<script type="text/javascript">

var con = 0;
onload = function(){
           xxx;
}

onscroll = function(){
        var x = document.getElementById('a');
           lll = x.lastElementChild;
           ttt = x.firstElementChild;
                console.info('#000 last.Div', x.lastElementChild.innerText);
                console.info('#111 first.Div', ttt.getBoundingClientRect().top);
                console.info('#222 last.Div', lll.getBoundingClientRect().top);
                console.info('#333 Win.InnerHeight', innerHeight);
          if(lll.getBoundingClientRect().top < innerHeight - 100){
                qqq();
        }
}

var qqq =function(){
        var x = document.getElementById('a');
                for(var i = 0; i<90; i++){
                    var c = document.createElement('div');
                      con = con +1;
                      c.innerText = "aaaaaaaaaaaaaaaaaaaa         -"+ con;
                      x.appendChild(c);
               }
}

var xxx = (function () {
        var x = document.getElementById('a');
        for(var i = 0; i<90 ; i++){
                var c = document.createElement('div');
                con = con +1;
                c.innerText = "aaaaaaaaaaaaaaaaaaaa         -"+ con;
                x.appendChild(c);
         }
})();

</script>
</htmal>

0 件のコメント: