js检测页面上一个元素是否已经滚动到了屏幕的可视区域内

更新日期: 2018-07-26阅读: 4.3k标签: js知识分享

复制链接

新浪微博

QQ 好友

扫一扫分享

应用场景：

只要页面加载了，其中在页面中出现的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+"个发送请求  ");
	            }
	        });
	}

拓展：

getBoundingClientRect() https://www.cnblogs.com/Songyc/p/4458570.html

来源：https://blog.csdn.net/yingzizizizizizzz/article/details/81205602

链接: https://fly63.com/article/detial/955

js检测页面上一个元素是否已经滚动到了屏幕的可视区域内

应用场景：

思路一：

思路二：

思路三：

拓展：

classList的使用，原生js对class的添加，删除，修改等方法的总结，以及兼容操作

js原型链，Javascript重温OOP之原型与原型链

讲解JavaScript 之arguments的详解，arguments.callee，arguments.caller的使用方法和实例

WebSocket的原理及WebSocket API的使用，js中如何运用websocket

javascript对dom的操作总汇，js创建，更新，添加，删除DOM的方法

深入理解JS中引用类型和基本类型

深入理解Javascript中apply、call、bind方法的总结。

理解js中prototype和proto和的区别和作用？

js中“=”，“==”，“===”的使用和深入理解

JS的变量作用域问题，理解js全局变量和局部变量问题

js检测页面上一个元素是否已经滚动到了屏幕的可视区域内

应用场景：

思路一：

思路二：

思路三：

拓展：

classList的使用，原生js对class的添加，删除，修改等方法的总结，以及兼容操作

js原型链，Javascript重温OOP之原型与原型链

讲解JavaScript 之arguments的详解，arguments.callee，arguments.caller的使用方法和实例

WebSocket的原理及WebSocket API的使用，js中如何运用websocket

javascript对dom的操作总汇，js创建，更新，添加，删除DOM的方法

深入理解JS中引用类型和基本类型

深入理解Javascript中apply、call、bind方法的总结。

理解js中prototype和__proto__和的区别和作用？

js中“=”，“==”，“===”的使用和深入理解

JS的变量作用域问题，理解js全局变量和局部变量问题

理解js中prototype和proto和的区别和作用？