Heim > Artikel > Web-Frontend > Drei Methoden, um festzustellen, ob sich die Elemente auf der js-Seite innerhalb des Bildschirmanzeigebereichs befinden

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

php是最好的语言Original: 2018-07-26 10:32:076255Durchsuche

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>

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>

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");
	            }
	        });
	}

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+"个发送请求  ");
	            }
	        });
	}

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!

JavaScript 全局变量 JS li

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：JavaScript: Die Rolle dieses Schlüsselworts und worauf Sie bei der Verwendung achten müssenNächster Artikel：JavaScript: Die Rolle dieses Schlüsselworts und worauf Sie bei der Verwendung achten müssen

In Verbindung stehende Artikel

Mehr sehen