Verwenden Sie native js, um die Bildlaufleiste zu überwachen, um den unteren Rand zu erreichen und einen Inhalt zu laden

Webseite, um festzustellen, ob die Bildlaufleiste den unteren Rand erreicht

Document.onscroll

Verwenden Sie zunächst die Onscroll-Methode des Dokuments, um die Änderungen der Bildlaufleiste zu überwachen

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

Spezifischer Code

Das Wichtigste ist, durch die scrollHeight des Dokuments und das scrollTop des Dokuments zu erreichen

Code:

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

Vollständiger HTML-Code

	<!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>
Veröffentlicht 20 Originalarbeiten · erntete Lob 5 · Aufrufe 2078

Ich denke du magst

Origin blog.csdn.net/qq_42859887/article/details/103623730
Empfohlen
Rangfolge