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

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是最好的语言original: 2018-07-26 10:32:076279parcourir

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>

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>

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

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

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!

JavaScript 全局变量 JS li

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：JavaScript : le rôle de ce mot-clé et ce à quoi vous devez faire attention lors de son utilisationArticle suivant：JavaScript : le rôle de ce mot-clé et ce à quoi vous devez faire attention lors de son utilisation

Articles Liés

Voir plus