ネイティブjsを使用してスクロールバーを監視し、下部に到達してコンテンツの一部をロードする

スクロールバーが一番下に達しているかどうかを判断するWebページ

Document.onscroll

まず、ドキュメントのonscrollメソッドを使用して、スクロールバーの変更を監視します

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

特定のコード

最も重要なことは、ドキュメントのscrollHeightとドキュメントの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>
公開された20元の記事 ウォンの賞賛5 ビュー2078

おすすめ

転載: blog.csdn.net/qq_42859887/article/details/103623730