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

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

  1. 如何使用 js 检测页面上全局变量

    如何使用 js 检测页面上全局变量 js 检测页面全局变量脚本 <!DOCTYPE html> <html lang="zh-Hans"> <head ...

  2. scrollIntoView 前的元素滚动到浏览器窗口的可视区域内 不止垂直滚动，还有水平滚动

    Element.scrollIntoView() 方法让当前的元素滚动到浏览器窗口的可视区域内 element.scrollIntoView(); // 等同于element.scrollIntoVi ...

  3. python3 操作页面上各种元素的方法

    (1)       控制浏览器 ①控制浏览器窗口大小set_window_size(宽,高) 打开浏览器全屏maximize_window() ②控制浏览器后退back().前进forward() ③ ...

  4. Progress.js – 为页面上的任意对象创建进度条效果

    Progress.js 是一个 JavaScript 和 CSS3 的库,它帮助开发人员为网页上的每个对象创建和管理进度条效果.你可以设计自己的模板,进度条或者干脆定制. 您可以使用 Progress ...

  5. JS基础入门篇（ 三 ）—使用JS获取页面中某个元素的4种方法以及之间的差别（ 一 ）

    1.使用JS获取页面中某个元素的4种方法 1.通过id名获取元素 document.getElementById("id名"); 2.通过class名获取元素 document.g ...

  6. 使用js在页面上新建文件夹

    使用js在页面上新建文件夹 <!DOCTYPE html> <html lang="en"> <head> <meta charset=& ...

  7. js 判断一个元素是否在滚动的可视区域内，不在就固定到可视区域的上方。

    前言:最近工作中,有这样一个场景,判断一个元素是否在滚动的可视区域内,不在就固定到可视区域的上方.为了以后再次遇到,所以记录下来,并分享.转载请注明出处:https://www.cnblogs.com ...

  8. 章节十四、9-Actions类鼠标悬停、滚动条、拖拽页面上的元素

    一.鼠标悬停 1.在web网站中,有一些页面元素只需要我们将鼠标指针放在上面就会出现被隐藏的下拉框或者其它元素,在自动化的过程中我们使用Actions类对鼠标进行悬停操作. 2.案例演示 packag ...

  9. JS 在页面上直接将json数据导出到excel，支持chrome,edge,IE10+,IE9,IE8,Safari,Firefox

    JS 在页面上直接将json数据导出到excel,支持chrome,edge,IE10+,IE9,IE8,Safari,Firefox <html> <head> </h ...

随机推荐

  1. （七十二）c#Winform自定义控件-雷达图

    前提 入行已经7,8年了,一直想做一套漂亮点的自定义控件,于是就有了本系列文章. GitHub:https://github.com/kwwwvagaa/NetWinformControl 码云:ht ...

  2. Python3.7.4入门-3函数

    3 函数 3.1 定义函数 def fib(n): # write Fibonacci series up to n """Print a Fibonacci serie ...

  3. 【Jsp】利用iframe实现action不跳转

    <form role="form" target="id_frame" action="dk" method="post&q ...

  4. WPF 将字体文件 添加到 资源文件，并在后台代码使用

    先看结果 1.将字体文件,导入到资源文件,如: 添加后,自动生成 2.在窗体xaml中添加如: 3.在xaml窗体对应的cs文件中,为TextBlock指定字段 创建一个字段对象,并指定字体文件的所在 ...

  5. 品Spring：详细解说bean后处理器

    一个小小的里程碑 首先感谢能看到本文的朋友,感谢你的一路陪伴. 如果每篇都认真看的话,会发现本系列以bean定义作为切入点,先是详细解说了什么是bean定义,接着又强调了bean定义为什么如此重要. ...

  6. linux mint安装ffmpge

    sudo add-apt-repository ppa:mc3man/trusty-media sudo apt-get update sudo apt-get install ffmpeg

  7. Nginx+PHP7.3.9 Docker镜像制作

    最近因项目需要制作了多个版本的php docker镜像,制作过程可谓是一波三折,因基于yum的方式安装php的方式在安装扩展插件时很不方便,不容易找到插件对应的yum源,所以PHP在docker镜像中 ...

  8. C# HttpWebRequest 后台调用接口上传大文件以及其他参数

    直接上代码,包各位看客能用!!! 1.首先请求参数的封装 /// <summary> /// 上传文件 - 请求参数类 /// </summary> public class ...

  9. navicat for mysql中使用模型？

    登录进数据库后,点击模型--新建模型,如下 点击“小手”下面的图标----双击右边的空白处,即出现一个表格,可命名,此时我们命名为A 双击A表下空白处---即可设计A表属性,点确定.如下 同理,生成一 ...

  10. 阿里云VS腾讯云 谁才是中国未来的云计算之王？

    阿里云早在 2009 年就已经开始布局云计算领域,具有先发优势.据统计,40% 的中国 500 强企业.近一半中国上市公司.80% 中国科技类公司是阿里云的客户.而腾讯云基于腾讯自身在游戏.视频.社交 ...