js 浏览器到底部添加数据

最新推荐文章于 2022-11-10 14:44:55 发布

心郎

最新推荐文章于 2022-11-10 14:44:55 发布

阅读量697

点赞数

分类专栏：前端_js_案例

本文链接：https://blog.csdn.net/u011301203/article/details/68952080

版权

前端_js_案例专栏收录该内容

22 篇文章 3 订阅

订阅专栏

<!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>

心郎

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
js 浏览器到底部添加数据

li{ height: 100px; line-height: 100px; width: 200px; margin: 0 auto; border: 1px solid chartreuse; background-color: #000000; text-align: center; color: chartreuse; box-sizi
复制链接

扫一扫