Maison > Article > interface Web > 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:076194parcourir
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= $('ul').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= $('ul').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= $('ul').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é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!