三種方法判斷js頁面上的元素是否在螢幕顯示區域內
- php是最好的语言原創
- 2018-07-26 10:32:076278瀏覽
應用程式場景：只要頁面載入了，其中在頁面中出現的li就向控制台輸出第幾個發送請求；在本次加載的頁面中，再將滾動條滾回前邊的li，不再向控制台輸出東西，也就是說已經顯示過的li，不再輸出東西到控制台。
<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>
想法一：
定義了一個全域變數lastItem，用來記下最後顯示的li的index；如此，當li的index>lastItem,就表示li還沒展示過，能輸出東西。
<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>想法二：
為每個li動態新增一個屬性，用來表示這個li是否顯示過；在傳送請求後，設定屬性為true即可；未顯示過不添加屬性即可。
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");
}
});
}思路三：
利用getBoundingClientRect()方法，只要其中的.top<=可視區域的高度即可
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+"个发送请求 ");
}
});
}相關推薦：
#javascript full screen 全螢幕顯示頁面元素的方法
#影片教學：JS中網站即時秒錶實作-前端JS開發27個經典實戰
#以上是三種方法判斷js頁面上的元素是否在螢幕顯示區域內的詳細內容。更多資訊請關注PHP中文網其他相關文章！
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn