집 > 기사 > 웹 프론트엔드 > js 페이지의 요소가 화면 표시 영역 내에 있는지 확인하는 세 가지 방법

js 페이지의 요소가 화면 표시 영역 내에 있는지 확인하는 세 가지 방법

php是最好的语言원래의: 2018-07-26 10:32:076195검색

응용 시나리오: 페이지가 로드되는 동안 페이지에 나타나는 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:

전역 변수 lastItem을 정의하여 마지막으로 표시된 li의 인덱스를 기록합니다. 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에 속성을 동적으로 추가하고, 표시되지 않은 경우 속성을 추가하지 마세요.

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

세 가지 아이디어:

.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 페이지의 요소가 화면 표시 영역 내에 있는지 확인하는 세 가지 방법

아이디어 1:

아이디어 2:

세 가지 아이디어:

관련 기사