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

应用场景：
只要页面加载了，其中在页面中出现的li就向控制台输出第几个发送请求；在本次加载的页面中，再将滚动条滚回前边的li，不再向控制台输出东西，也就是说已经显示过的li，不再向控制台输出东西。

• 0001


• 0002


• 0003


• 0004


• 0005


• 0006


• 0007


• 0008


• 0009


• 00010


• 00011


• 00012


• 00013


• 00014


• 00015


• 00016


• 00017


• 00018


• 00019


• 00020


• 00021


• 00022

思路一：
定义了一个全局变量lastItem，用来记下最后显示的li的index；如此，当li的index>lastItem,就表示li还没展示过，能输出东西。

思路二：
给每个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(mTopconsole.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+"个发送请求 ");
}
});
}

转载于:https://www.cnblogs.com/plBlog/p/11429965.html