三种方法判断js页面上的元素是否在屏幕显示区域内-js教程-PHP中文网

思路一：

思路二：

思路三：

首页

web前端

js教程

三种方法判断js页面上的元素是否在屏幕显示区域内

php是最好的语言

Jul 26, 2018 am 10:32 AM

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

登录后复制

热AI工具

热工具

热门话题

gmail邮箱登陆入口在哪里

7343

Java教程

1627

CakePHP 教程

1352

Laravel 教程

1265

PHP教程

1210

显示更多

Related knowledge

在JavaScript中替换字符串字符 Mar 11, 2025 am 12:07 AM

JavaScript字符串替换方法详解及常见问题解答本文将探讨两种在JavaScript中替换字符串字符的方法：在JavaScript代码内部替换和在网页HTML内部替换。在JavaScript代码内部替换字符串最直接的方法是使用replace()方法： str = str.replace("find","replace"); 该方法仅替换第一个匹配项。要替换所有匹配项，需使用正则表达式并添加全局标志g： str = str.replace(/fi

自定义Google搜索API设置教程 Mar 04, 2025 am 01:06 AM

本教程向您展示了如何将自定义的Google搜索API集成到您的博客或网站中，提供了比标准WordPress主题搜索功能更精致的搜索体验。令人惊讶的是简单！您将能够将搜索限制为Y

构建您自己的Ajax Web应用程序 Mar 09, 2025 am 12:11 AM

因此，在这里，您准备好了解所有称为Ajax的东西。但是，到底是什么？ AJAX一词是指用于创建动态，交互式Web内容的一系列宽松的技术。 Ajax一词，最初由Jesse J创造

示例颜色json文件 Mar 03, 2025 am 12:35 AM

本文系列在2017年中期进行了最新信息和新示例。在此JSON示例中，我们将研究如何使用JSON格式将简单值存储在文件中。使用键值对符号，我们可以存储任何类型的

8令人惊叹的jQuery页面布局插件 Mar 06, 2025 am 12:48 AM

利用轻松的网页布局：8个基本插件 jQuery大大简化了网页布局。本文重点介绍了简化该过程的八个功能强大的JQuery插件，对于手动网站创建特别有用

什么是这个＆＃x27;在JavaScript？ Mar 04, 2025 am 01:15 AM

核心要点 JavaScript 中的 this 通常指代“拥有”该方法的对象，但具体取决于函数的调用方式。没有当前对象时，this 指代全局对象。在 Web 浏览器中，它由 window 表示。调用函数时，this 保持全局对象；但调用对象构造函数或其任何方法时，this 指代对象的实例。可以使用 call()、apply() 和 bind() 等方法更改 this 的上下文。这些方法使用给定的 this 值和参数调用函数。 JavaScript 是一门优秀的编程语言。几年前，这句话可