ホームページ >ウェブフロントエンド >jsチュートリアル >jsページ上の要素が画面表示領域内にあるかどうかを判定する3つの方法

jsページ上の要素が画面表示領域内にあるかどうかを判定する3つの方法

php是最好的语言オリジナル: 2018-07-26 10:32:076282ブラウズ

アプリケーションシナリオ: ページがロードされている限り、ページに表示される 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>

アイデア 1:

は、このように最後に表示された li のインデックスを記録するグローバル変数 lastItem を定義します。li のインデックス > 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>

アイデア 2:

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

3 つのアイデア:

.top<= 表示領域の高さである限り、getBoundingClientRect() メソッドを使用します

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

jsページ上の要素が画面表示領域内にあるかどうかを判定する3つの方法

アイデア 1:

アイデア 2:

3 つのアイデア:

関連記事