div滑动到可视区_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还没展示过，能输出东西。

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(mToplastItem){

console.log(index+1+"个发送请求 ");

lastItem+=1;

}

});

}

思路二：

给每个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

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

}

});

}