三种方法判断js页面上的元素是否在屏幕显示区域内
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了三种方法判断js页面上的元素是否在屏幕显示区域内,小编现在分享给大家,供广大互联网技能从业者学习和参考。文章包含2349字,纯文字阅读大概需要4分钟。
内容图文
应用场景:只要页面加载了,其中在页面中出现的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控制元素显示在屏幕固定位置及监听屏幕高度变化的方法
javascript full screen 全屏显示页面元素的方法
视频教程:JS中网站实时秒表实现-前端JS开发27个经典实战
以上就是三种方法判断js页面上的元素是否在屏幕显示区域内的详细内容,更多请关注Gxl网其它相关文章!
内容总结
以上是互联网集市为您收集整理的三种方法判断js页面上的元素是否在屏幕显示区域内全部内容,希望文章能够帮你解决三种方法判断js页面上的元素是否在屏幕显示区域内所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错,欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 gblab@vip.qq.com 举报,一经查实,本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。