Trois méthodes pour déterminer si les éléments de la page js se trouvent dans la zone d'affichage de l'écran-js tutoriel-php.cn

Trois méthodes pour déterminer si les éléments de la page js se trouvent dans la zone d'affichage de l'écran

php是最好的语言

Libérer： 2018-07-26 10:32:07

original

6257 Les gens l'ont consulté

Scénario d'application : tant que la page est chargée, le li qui apparaît dans la page affichera le numéro de la requête sur la console ; dans la page chargée cette fois, faites rouler la barre de défilement jusqu'au li précédent et non n'envoie plus la requête à la console. La console produit des choses, c'est-à-dire que le li qui a été affiché ne produira plus de choses à la console.

<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>

Copier après la connexion

Idée 1 :

définit une variable globale lastItem, qui est utilisée pour enregistrer l'index du dernier li affiché de cette manière, lorsque l'index de li>lastItem, il ; signifie que le li n'a pas encore été affiché. Il a été démontré qu'il peut produire des choses.

 <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>

Copier après la connexion

Idée 2 :

Ajoutez dynamiquement un attribut à chaque li pour indiquer si le li a été affiché après l'envoi de la requête, définissez l'attribut sur true, il n'est pas affiché ; n'ajoutez pas d'attributs.

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

Copier après la connexion

Trois idées :

Utilisez la méthode getBoundingClientRect(), à condition que .top<= la hauteur de la zone visible

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

Copier après la connexion

Recommandations associées :

Méthodes permettant à js de contrôler les éléments à afficher à une position fixe sur l'écran et de surveiller les changements de hauteur de l'écran

Méthode javascript plein écran pour afficher la page éléments en plein écran

Tutoriel vidéo : Implémentation d'un chronomètre en temps réel pour les sites Web en JS - 27 pratiques pratiques classiques pour le développement front-end JS

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!