三種方法判斷js頁面上的元素是否在螢幕顯示區域內-js教程-PHP中文網

三種方法判斷js頁面上的元素是否在螢幕顯示區域內

php是最好的语言

發布： 2018-07-26 10:32:07

原創

6257 人瀏覽過

應用程式場景：只要頁面載入了，其中在頁面中出現的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= $(&#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>

登入後複製

想法二：

為每個li動態新增一個屬性，用來表示這個li是否顯示過；在傳送請求後，設定屬性為true即可；未顯示過不添加屬性即可。

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

登入後複製

思路三：

利用getBoundingClientRect()方法，只要其中的.top<=可視區域的高度即可

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

登入後複製