I. Einleitung
Der heutige Fall stellt ein Bildlaufleistenereignis dar. Wenn der Abstand zwischen der Bildlaufleiste und dem unteren Rand kleiner als ein Bereichswert ist, wird die Höhe der Seite automatisch erhöht, um den Effekt zu erzielen, dass der untere Rand nie gezeichnet wird.
2. Der Unterschied zwischen scrollHeight , scrollTop und clientHeight
Der Volltext der Seite ist hoch
Der Abstand von der Bildlaufleiste nach oben (der Abstand, um den die Bildlaufleiste weggerollt wird)
Sichtbare Bildschirmhöhe
Da js uns nicht den Abstand von der Bildlaufleiste bis zum unteren Rand angibt, müssen wir den Abstand vom unteren Rand der Bildlaufleiste berechnen, indem wir den Abstand vom oberen Rand der Bildlaufleiste von der Höhe des sichtbaren Bildschirms subtrahieren , indem wir die Höhe des Volltextes der Webseite .
3. Code
<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>Dies wird für die Bequemlichkeit der zukünftigen Verwendung aufgezeichnet, und ich hoffe, dass die großen Jungs mehr kommunizieren, viele Nachrichten hinterlassen und auf meine Mängel hinweisen können!
Freunde in Not können forschen! !