js 浏览器到底部添加数据_nwjs 窗口底部添加内容-优快云博客

本文链接：https://blog.youkuaiyun.com/u011301203/article/details/68952080

本文介绍了一个使用HTML、CSS和JavaScript实现的无限滚动加载效果的示例。当用户滚动到页面底部时，新的列表项将自动加载并追加到现有列表中。文章通过具体的代码示例详细解释了如何监听滚动事件，并在适当的时候增加新的内容。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <title></title>
    <style>
		li{
			height: 100px;
			line-height: 100px;
			width: 200px;
			margin: 0 auto;
			border: 1px solid chartreuse;
			background-color: #000000;
			text-align: center;
			color: chartreuse;
			box-sizing: content-box;
		}    	
		.conten{
			border: 5px solid red;
		}
		*{
			margin: 0;
			padding: 0;
		}
    </style>
</head>
<body>
	<div class="conten">
		<li>div1</li>
		<li>div2</li>
		<li>div3</li>
		<li>div4</li>
		<li>div5</li>
		<li>div6</li>
		<li>div7</li>
		<li>div8</li>
		<li>div9</li>
		<li>div10</li>
		<li>div11</li>
		<li>div12</li>
	</div>
	<script>
		 window.onload = function () {
			var conten = document.getElementsByClassName('conten')[0];
	  		window.addEventListener('scroll',function(){
//				 console.log("盒子总高度："+conten.offsetHeight); 
//	  			 console.log("被卷曲的部分高度："+scroll().top);  
//	  			 console.log("body高度："+document.body.clientHeight);
//	  			 console.log("可见区域高度:"+document.documentElement.clientHeight);
//	  			 console.log("-------------")
	  			var  hAll = conten.offsetHeight - document.documentElement.clientHeight;//总高度-可视区域
	  			var  scrollTop = scroll().top;
				var lastLi = conten.lastElementChild.innerHTML || conten.lastChild.innerHTML;
				var num = parseInt(lastLi.substring(3,5));
	  			if(hAll == scrollTop){
	  				var li = document.createElement('li');
	  				li.innerText = 'div'+(num+1);
	  				conten.appendChild(li);
	  			}
	  		})
			function scroll(){  
		      	return {  
		          	"top": window.pageYOffset || document.body.scrollTop || document.documentElement.scrollTop,  
		          	"left":  window.pageXOffset || document.body.scrollLeft || document.documentElement.scrollLeft  
		      	}  
		    } 
   		}
	</script>
</body>
</html>