手順
1. lastElementChild の getBoundingClientRect().ｔop を所得
2. window.innerHeight 高さを所得
3. window.onscroll で window.innerHeight と getBoundingClientRect().ｔop
の位置を計算します。
4. getBoundingClientRect().ｔop は 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 件のコメント:
コメントを投稿