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

时间: 2018-07-26阅读: 2699标签: js知识

应用场景:

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

  1. <body>
  2. <ul>
  3. <li onclick="jumpOther()">0001</li>
  4. <li>0002</li>
  5. <li>0003</li>
  6. <li>0004</li>
  7. <li>0005</li>
  8. <li>0006</li>
  9. <li>0007</li>
  10. <li>0008</li>
  11. <li>0009</li>
  12. <li>00010</li>
  13. <li>00011</li>
  14. <li>00012</li>
  15. <li>00013</li>
  16. <li>00014</li>
  17. <li>00015</li>
  18. <li>00016</li>
  19. <li>00017</li>
  20. <li>00018</li>
  21. <li>00019</li>
  22. <li>00020</li>
  23. <li class="ts">00021</li>
  24. <li>00022</li>
  25. </ul>
  26. </body>


思路一:

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

  1. <script type="text/JavaScript">
  2. var lastItem=0;
  3. $(document).ready(function () {
  4. sendAsk();
  5. window.addEventListener("scroll",function(e){
  6. sendAsk();
  7. });
  8. });
  9. function sendAsk(){
  10. var lis= $('ul').find("li");
  11. //swHeight=滚动的高度+窗体的高度;当li的offset高度<=swHeight,那么说明当前li显示在可视区域了
  12. var swHeight=$(window).scrollTop()+$(window).height();
  13. $.each(lis, function (index, item) {
  14. mTop=item.offsetTop;
  15. var dItem=index+1;
  16. if(mTop<swHeight&&dItem>lastItem){
  17. console.log(index+1+"个发送请求 ");
  18. lastItem+=1;
  19. }
  20. });
  21. }
  22. </script>


思路二:

给每个li动态添加一个属性,用来表示这个li是否显示过;在发送请求后,设置属性为true即可;未显示过不添加属性即可。

  1. function sendAsk() {
  2. var lis= $('ul').find("li");
  3. //swHeight=滚动的高度+窗体的高度;当li的offset高度<=swHeight,那么说明当前li显示在可视区域了
  4. var swHeight=$(window).scrollTop()+$(window).height();
  5. $.each(lis, function (index, item) {
  6. mTop=item.offsetTop;
  7. if(mTop<swHeight&&!item.getAttribute("data-send")){
  8. console.log(index+1+"个发送请求 ");
  9. item.setAttribute("data-send","true");
  10. }
  11. });
  12. }


思路三:

利用getBoundingClientRect()方法,只要其中的.top<=可视区域的高度即可

  1. function sendAsk(){
  2. var lis= $('ul').find("li");
  3. //swHeight=滚动的高度+窗体的高度;当li的offset高度<=swHeight,那么说明当前li显示在可视区域了
  4. var swHeight=$(window).height();
  5. $.each(lis, function (index, item) {
  6. mTop=item.getBoundingClientRect().top;
  7. console.log(mTop);
  8. if(mTop<=swHeight){
  9. console.log(index+1+"个发送请求 ");
  10. }
  11. });
  12. }

拓展:

getBoundingClientRect() https://www.cnblogs.com/Songyc/p/4458570.html

来源:https://blog.csdn.net/yingzizizizizizzz/article/details/81205602


站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

链接: http://www.fly63.com/article/detial/955

深入理解javascript中的事件循环event-loop

人们把javascript调控同步和异步任务的机制称为事件循环,首先来看事件循环机制的可视化描述,主线程运行的时候,产生堆和栈,栈中的代码调用各种外部API,异步操作执行完成后,就在消息队列中排队。

JavaScript中的行为委托

行为委托简单来说就是一种设计模式,不同于传统的构造函数的类式设计。这里每个例子会通过构造函数,class和行为委托来不同实现,不过不会评论class,是否使用class取决于你的观点。

JavaScript 进阶问题列表

我在我的 Instagram 上每天都会发布 JavaScript 的选择题,并且同时也会在这个仓库中发布。从基础到进阶,测试你有多了解 JavaScript,刷新你的知识,或者帮助你的 coding 面试!

js变量引用(指针)

基本类型:Number,Boolen,null,String,Underfined 存放在栈内存中,数据长度是固定的。引用类型:Object存在堆内存中,数据长度是变化的(同时有栈内存中有一个指针指向这个Object的)。

前端基础之BOM和DOM

JavaScript分为 : ECMAScript,DOM,BOM。BOM(Browser Object Model)是指浏览器对象模型,它使 JavaScript 有能力与浏览器进行“对话”。DOM (Document Object Model)是指文档对象模型

javascript:void(0)的含义

首先,void关键字是javascript当中非常重要的关键字,该操作符指定要计算或运行一个表达式,但是不返回值。语法格式:void func()、void(func())

js设备判断_判断移动端还是PC端?判断android还是ios?判断移动端浏览器类型?

js判断用户的浏览设备是移动设备还是PC?判断详细浏览器设备信息。判断微信、新浪、QQ打开。判断是android系统还是ios系统...

手写JavaScript中的bind方法

bind方法返回的是一个绑定this后的函数,并且该函数并没有执行,需要手动去调用。(从这一点看bind函数就是一个高阶函数,而且和call,apply方法有区别)。bind方法可以绑定this,传递参数。注意,这个参数可以分多次传递。

如何掌握并用好defer(延迟执行)

defer:在函数A内用defer关键字调用的函数B会在在函数A return后执行。先看一个基础的例子,了解一下defer的效果,这段代码运行后会打印出:

原生js实现数字三位逗号,分隔。js实现支持逗号分割的货币格式表示法总汇

javascript实现数字三位逗号分隔,如把123456.78转换为123,456.78。js实现支持货币格式表示法:toLocaleString在将数字转换为字符串的同时,会使用三位分节法进行显示。slice 方法用于截取字符串中的一部分并返回该部分字符串。match方式代表正则表达式的匹配....

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!