Drei Methoden, um festzustellen, ob sich die Elemente auf der js-Seite innerhalb des Bildschirmanzeigebereichs befinden-js-Tutorial-php.cn

Drei Methoden, um festzustellen, ob sich die Elemente auf der js-Seite innerhalb des Bildschirmanzeigebereichs befinden

php是最好的语言

Freigeben： 2018-07-26 10:32:07

Original

6309 Leute haben es durchsucht

Anwendungsszenario: Solange die Seite geladen ist, gibt das auf der Seite angezeigte Li die Nummer der Anforderung an die Konsole aus. Diesmal wird die Bildlaufleiste auf das vorherige Li und Nr. zurückgesetzt Senden Sie die Anfrage nicht mehr an die Konsole. Das heißt, die angezeigte LI gibt keine Dinge mehr an die Konsole aus.

<body>
<ul>
<li onclick="jumpOther()">0001</li>
<li>0002</li>
<li>0003</li>
<li>0004</li>
<li>0005</li>
<li>0006</li>
<li>0007</li>
<li>0008</li>
<li>0009</li>
<li>00010</li>
<li>00011</li>
<li>00012</li>
<li>00013</li>
<li>00014</li>
<li>00015</li>
<li>00016</li>
<li>00017</li>
<li>00018</li>
<li>00019</li>
<li>00020</li>
<li class="ts">00021</li>
<li>00022</li>
</ul>
</body>

Nach dem Login kopieren

Idee 1:

Definiert eine globale Variable lastItem, um den Index des zuletzt angezeigten li aufzuzeichnen. Wenn der Index von li>lastItem ist, bedeutet dies, dass das li nicht vorhanden ist wurde noch angezeigt, kann Dinge ausgeben.

 <script type="text/javascript">
   var lastItem=0;
	$(document).ready(function () { 
		sendAsk();
		window.addEventListener("scroll",function(e){
			sendAsk();
		});
	});
function sendAsk(){
		var lis= $(&#39;ul&#39;).find("li");
//swHeight=滚动的高度+窗体的高度；当li的offset高度<=swHeight,那么说明当前li显示在可视区域了
		    var swHeight=$(window).scrollTop()+$(window).height();
	        $.each(lis, function (index, item) {
	            mTop=item.offsetTop;
	            var dItem=index+1;
	            if(mTop<swHeight&&dItem>lastItem){
	            	console.log(index+1+"个发送请求  ");
	            	lastItem+=1;
	            }
	        });
	}
</script>

Nach dem Login kopieren

Idee 2:

Fügen Sie jedem Li dynamisch ein Attribut hinzu, um anzugeben, ob das Li nach dem Senden der Anfrage angezeigt wurde. Es wird nicht angezeigt. Fügen Sie einfach Attribute hinzu.

function sendAsk() {
		var lis= $(&#39;ul&#39;).find("li");
		    //swHeight=滚动的高度+窗体的高度；当li的offset高度<=swHeight,那么说明当前li显示在可视区域了
		    var swHeight=$(window).scrollTop()+$(window).height();
	        $.each(lis, function (index, item) {
	            mTop=item.offsetTop;
	            if(mTop<swHeight&&!item.getAttribute("data-send")){
	            	console.log(index+1+"个发送请求  ");
	            	item.setAttribute("data-send","true");
	            }
	        });
	}

Nach dem Login kopieren

Drei Ideen:

Verwenden Sie die Methode getBoundingClientRect(), solange .top<= die Höhe des sichtbaren Bereichs ist

function sendAsk(){
			var lis= $(&#39;ul&#39;).find("li");
		    //swHeight=滚动的高度+窗体的高度；当li的offset高度<=swHeight,那么说明当前li显示在可视区域了
		    var swHeight=$(window).height();
	        $.each(lis, function (index, item) {
	            mTop=item.getBoundingClientRect().top;
	            console.log(mTop);
	            if(mTop<=swHeight){
	            	console.log(index+1+"个发送请求  ");
	            }
	        });
	}

Nach dem Login kopieren

Verwandte Empfehlungen:

JS-Methode zur Steuerung von Elementen, die an einer festen Position auf dem Bildschirm angezeigt werden sollen, und zur Überwachung von Änderungen der Bildschirmhöhe

Javascript-Vollbildmethode zur Anzeige von Seitenelementen im Vollbildmodus

Video-Tutorial: Implementierung einer Echtzeit-Stoppuhr für Websites in JS – 27 klassische Praktiken in der Front-End-JS-Entwicklung

Das obige ist der detaillierte Inhalt vonDrei Methoden, um festzustellen, ob sich die Elemente auf der js-Seite innerhalb des Bildschirmanzeigebereichs befinden. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!