I.はじめに
今日のケースはスクロール バー イベントです. スクロール バーと下部の間の距離が範囲値よりも小さい場合、ページの高さが自動的に増加し、下部が描画されないという効果が得られます.
2. scrollHeight、scrollTop、clientHeightの違い
ページの全文が高い
スクロールバーから一番上までの距離(スクロールバーが転がる距離)
表示画面の高さ
js はスクロール バーから下部までの距離を提供しないため、スクロール バーの上部から表示画面の高さまでの距離を引いて、スクロール バーの下部からの距離を計算する必要があります。Web ページの全文の高さ。
3.コード
<style>
body{
padding-top: 2000px;
}
</style>
<body>
<script>
var body1 = document.getElementsByTagName("body")[0];
var step = 500;
var offsetx =0;
console.log(body1);
// body1.style.paddingBottom = 0;
// body1.style.paddingBottom =offsetx;
window.onscroll = function(){
//网页全文高
var pageHeight = document.documentElement.scrollHeight;
//滚动条被卷去的距离
var stop = document.documentElement.scrollTop;
//可以看到的屏幕高度
var seeHeight = document.documentElement.clientHeight;
//距离底部的距离
var bottom1 = pageHeight - stop - seeHeight;
// console.log("距离底部的距离"+ bottom1)
// console.log("网页全文高"+pageHeight)
// console.log("滚动条被卷去的距离"+stop)
// console.log("可以看到的屏幕高度"+seeHeight)
// console.log("---------")
//当滚动条距离距离底部小于200的时候就触发
if(bottom1<=200){
offsetx+=step;
body1.style.paddingBottom = offsetx +"px";
// alert("加载")
// document.write('111111111111111111111111')
}
//console.log(e)
}
</script>
これは将来の使用の便宜のために記録されたものであり、大物がより多くのコミュニケーションを取り、多くのメッセージを残し、私の欠点を指摘できることを願っています!
困っている友達が研究できる!!