js检测页面上一个元素是否已经滚动到了屏幕的可视区域内
应用场景：
只要页面加载了，其中在页面中出现的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检测页面上一个元素是否已经滚动到了屏幕的可视区域内的更多相关文章
- 如何使用 js 检测页面上全局变量
如何使用 js 检测页面上全局变量 js 检测页面全局变量脚本 <!DOCTYPE html> <html lang="zh-Hans"> <head ...
- scrollIntoView 前的元素滚动到浏览器窗口的可视区域内 不止垂直滚动，还有水平滚动
Element.scrollIntoView() 方法让当前的元素滚动到浏览器窗口的可视区域内 element.scrollIntoView(); // 等同于element.scrollIntoVi ...
- python3 操作页面上各种元素的方法
(1) 控制浏览器 ①控制浏览器窗口大小set_window_size(宽,高) 打开浏览器全屏maximize_window() ②控制浏览器后退back().前进forward() ③ ...
- Progress.js – 为页面上的任意对象创建进度条效果
Progress.js 是一个 JavaScript 和 CSS3 的库,它帮助开发人员为网页上的每个对象创建和管理进度条效果.你可以设计自己的模板,进度条或者干脆定制. 您可以使用 Progress ...
- JS基础入门篇（ 三 ）—使用JS获取页面中某个元素的4种方法以及之间的差别（ 一 ）
1.使用JS获取页面中某个元素的4种方法 1.通过id名获取元素 document.getElementById("id名"); 2.通过class名获取元素 document.g ...
- 使用js在页面上新建文件夹
使用js在页面上新建文件夹 <!DOCTYPE html> <html lang="en"> <head> <meta charset=& ...
- js 判断一个元素是否在滚动的可视区域内，不在就固定到可视区域的上方。
前言:最近工作中,有这样一个场景,判断一个元素是否在滚动的可视区域内,不在就固定到可视区域的上方.为了以后再次遇到,所以记录下来,并分享.转载请注明出处:https://www.cnblogs.com ...
- 章节十四、9-Actions类鼠标悬停、滚动条、拖拽页面上的元素
一.鼠标悬停 1.在web网站中,有一些页面元素只需要我们将鼠标指针放在上面就会出现被隐藏的下拉框或者其它元素,在自动化的过程中我们使用Actions类对鼠标进行悬停操作. 2.案例演示 packag ...
- JS 在页面上直接将json数据导出到excel，支持chrome,edge,IE10+,IE9,IE8,Safari,Firefox
JS 在页面上直接将json数据导出到excel,支持chrome,edge,IE10+,IE9,IE8,Safari,Firefox <html> <head> </h ...
随机推荐
- [Linux] telnet 具体到某个端口Connection refused
可以参考这个链接:https://q.cnblogs.com/q/106337/
- APP自動化測試腳本1
package com.lemon.day01; import java.net.MalformedURLException; import java.net.URL; import java.uti ...
- 原来python如此神奇
一.优缺点分析 1.缺点: ① 数学问题的生成中只考虑了消除乘除法加括号的无效情况(例如3*(4+5)或(6*5)/2这样的计算),但没有去掉加减法加括号的无效情况(例如(4+(7+8))或(3-(2 ...
- 从零开始入门 K8s | 应用配置管理
一.需求来源 背景问题 首先一起来看一下需求来源.大家应该都有过这样的经验,就是用一个容器镜像来启动一个 container.要启动这个容器,其实有很多需要配套的问题待解决: 第一,比如说一些可变的配 ...
- ASP.NET 服务端接收Multipart/form-data文件
在网络编程过程中需要向服务器上传文件. Multipart/form-data是上传文件的一种方式. /// <summary> /// 上传工程文件 /// </summary&g ...
- phpStudy后门漏洞利用复现
phpStudy后门漏洞利用复现 一.漏洞描述 Phpstudy软件是国内的一款免费的PHP调试环境的程序集成包,通过集成Apache.PHP.MySQL.phpMyAdmin.ZendOptimiz ...
- UML图标含义及记忆方法
记忆技巧: 箭头的一方为被动方(被调用者): 箭头的端点为主动方(调用者). 箭头为封闭三角形时,表示类间关系 箭头为半封闭尖括号时,表示类内关系.其中,虚线表示参数强制依赖关系,实线表示属性关系.一 ...
- Shell之操作环境
目录 Shell之操作环境 参考 命令运行顺序 欢迎信息 环境配置 Shell之操作环境
- Spring Cloud 版本控制
### 正常版本 ``` org.springframework.boot spring-boot-starter-parent 2.1.7.RELEASE ``` ### SpringCloud 版 ...
- Mac 安装node npm cnpm vue 以及卸载 node 和 npm 的方法 清空npm缓存的方法
S01 安装node(内含npm) 首先,到官网下载长期支持版,截止目前,最新的长期支持版本号是10.16.3 https://nodejs.org/zh-cn/download/ 下载完毕后,安装该 ...