三种方法判断js页面上的元素是否在屏幕显示区域内
- php是最好的语言原创
- 2018-07-26 10:32:076301浏览
应用场景：只要页面加载了，其中在页面中出现的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