使用原生js监听滚动条到达底部并加载一条内容

最新推荐文章于 2024-05-24 15:45:37 发布

ccc_c桑

最新推荐文章于 2024-05-24 15:45:37 发布

阅读量991

点赞数

分类专栏： web 日常

本文链接：https://blog.csdn.net/qq_42859887/article/details/103623730

版权

日常同时被 2 个专栏收录

5 篇文章 0 订阅

订阅专栏

web

3 篇文章 0 订阅

订阅专栏

web网页判断滚动条是否到达底部

Document.onscroll
- 具体代码
- 完整html代码

Document.onscroll

首先要用document的onscroll方法监听滚动条的变化

document.onsroll = function () {
		/******/
}

具体代码

最重要的是要通过document的scrollHeight 和 document的scrollTop来实现

代码：

	if (_container.scrollTop == (_container.scrollHeight - 640)) {
			 var div=document.createElement('div');
			 div.innerHTML = "ssss";
			_container.appendChild(div)
		}

完整html代码

	<!DOCTYPE html>
	<html>
		<head>
			<meta charset="utf-8" />
			<meta name="viewport" content="width=device-width, initial-scale=1">
			<title></title>
			 <style>
			  #container {
			    position: absolute;
			    height: auto;
			    top: 0;
			    bottom: 0;
			    width: auto;
			    left: 0;
			    right: 0;
			    overflow: auto;
			  }
			  
			  #foo {
			    height:1000px;
			    width:1000px;
			    
			    display: block;
			  }
			  
			  </style>
		</head>
		<body>
		    <div id="container">
		      <div id="foo">sssss</div>
		    </div>
		  
		    <script type="text/javascript">
				
		      //js绑定你需要监控滚动事件的dom，也可以绑定document.body监控整个网页滚动
		      //也可以监控具体的dom滚动，像下面的container Id对象
			  _container = document.getElementById('container');
		      _container.onscroll = function() {
				console.log(document.getElementById('container').scrollHeight + " " + _container.scrollTop)
		        if (_container.scrollTop == (_container.scrollHeight - 640)) {
					 var div=document.createElement('div');
					 div.innerHTML = "ssss";
					_container.appendChild(div)
				}
		      };
		    </script>
		  </body>
	</html>

ccc_c桑

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
使用原生js监听滚动条到达底部并加载一条内容

web网页判断滚动条是否到达底部Document.onscroll具体代码完整html代码Document.onscroll首先要用document的onscroll方法监听滚动条的变化document.onsroll = function () { /******/}具体代码最重要的是要通过document的scrollHeight 和 document的scrollTop来实...
复制链接

扫一扫

专栏目录