前言

刷网页的时候，有时会遇到这样一个情景，当某个dom元素滚到可见区域时，或者图片的懒加载效果，它就会展现显示动画，十分有趣。那么这是如何实现的呢？

实现原理

想要实现这个功能，就要知道具体的实现原理。下面直入主题。

我们通过浏览器在浏览一个网页时候是这个样子的，如图所示

页面的长宽，以及各dom的坐标都是静止的，动的是显示窗口坐标而已。所以明白了这个，那么判断一个dom元素是否可见时，就十分简单了。

我们需要知道三个坐标就可知道当前dom是否在可见区域内，分别是

  1. 显示窗口的顶部坐标
  2. 显示窗口的底部坐标
  3. dom元素的中心坐标

其判断规则就是，当dom元素的中心坐标的X及Y坐标均小于显示窗口的顶部，且大于显示窗口的底部坐标时，那么就可以判断该坐标在可见区域。

OK，那么接下来就是要知道这三个坐标怎么计算了。

首先是窗口的顶部坐标，顶部坐标就是页面的滚动条滚动的距离。

其次是底部坐标，底部坐标就是滚动条的距离加上当前可视窗口的高度。

最后dom元素的中心距离，就是这个dom元素到最顶端的高度加上自身高度的一般。

原理就是那么的简单有木有。

具体实现

明白了原理，具体实现起来就很简单啦。下面直接贴上一个简单的dom代码做下示例，在实际的生产中还是要优化的，比如初次的首屏显示等等，这里就不赘述了。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

</head>

<style type="text/css">

    .box {

        width: 100%;

        height: 200px;

        background: #ff0000;

        margin-bottom: 10px;

        text-align: center;

        color: #fff;

        line-height: 200px;

        font-family: microsoft yahei;

        font-size: 40px;

    }

    .animate{

        animation: showText 1s;

    }

    @keyframes showText

    {

        from {

            font-size: 20px;

        }

        to {

            font-size: 40px;

        }

    }

</style>

<body>

<div class="box"></div>

<div class="box"></div>

<div class="box"></div>

<div class="box"></div>

<div class="box"></div>

<div class="box"></div>

<div class="box"></div>

<div class="box"></div>

<div class="box"></div>

<div class="box"></div>

<div class="box"></div>

<div class="box"></div>

<div class="box"></div>

<div class="box"></div>

</body>

<script type="text/javascript">

    var box = document.getElementsByClassName('box');

    document.addEventListener('scroll',function(){

        //滚动条高度+视窗高度 = 可见区域底部高度

        var visibleBottom = window.scrollY + document.documentElement.clientHeight;

        //可见区域顶部高度

        var visibleTop = window.scrollY;

        for (var i = 0; i < box.length; i++) {

            var centerY = box[i].offsetTop+(box[i].offsetHeight/2);

            if(centerY>visibleTop&&centerY<visibleBottom){

                box[i].innerHTML = '区域可见';

                box[i].setAttribute("class",'box animate');

                console.log('第'+i+'个区域可见');

            }else{

                box[i].innerHTML = '';

                box[i].setAttribute("class",'box');

                console.log('第'+i+'个区域不可见');

            }

        }

    })

</script>

</html>

JS判断指定dom元素是否在屏幕内的方法实例的更多相关文章

  1. JS获取HTML DOM元素的方法

    JS获取HTML DOM元素有八种方法: 1.根据id获取标签元素: document.getElementById("id名"); 2.根据标签名获取标签列表: document ...

  2. js 日期比较大小，js判断日期是否在区间内，js判断时间段是否在另外一个时间段内

    /** * 日期解析,字符串转日期 * @param dateString 可以为2017-02-16,2017/02/16,2017.02.16 * @returns {Date} 返回对应的日期对 ...

  3. js判断登陆用户名及密码是否为空的简单实例

    js判断登陆用户名及密码是否为空的简单实例 ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 <script type="text/javascript ...

  4. js判断浏览器是否安装或启用了flash的方法总结

    目录 # js判断浏览器是否安装或启用了flash的方法 # chrome浏览器启用flash插件的方法 # 参考 # js判断浏览器是否安装或启用了flash的方法 在传统浏览器,可以使用windo ...

  5. JS获取HTML DOM元素的8种方法

    什么是HTML DOM 文档对象模型(Document Object Model),是W3C组织推荐的处理可扩展置标语言的标准编程接口.简单理解就是HTML DOM 是关于如何获取.修改.添加或删除 ...

  6. JS/JQuery操作DOM元素笔记

    原因 自己目前在搭建一个.NET Core的框架,正在构建权限这块的东西,今天设置权限界面,需要使用JavaScript操作DOM元素,记录一下. 页面大概是酱紫的(我使用的AdminLTE和LayU ...

  7. 原生JS获取HTML DOM元素的8种方法

    JS获取DOM元素的方法(8种) 通过ID获取(getElementById) 通过name属性(getElementsByName) 通过标签名(getElementsByTagName) 通过类名 ...

  8. JS中对DOM元素的操作

    https://www.runoob.com/jquery/jquery-ref-html.html 1.each  遍历 //遍历所有class为checksingle的DOM元素 $(" ...

  9. 点击空白处隐藏指定dom元素（纯javascript方法）

    <script type="text/javascript"> document.onclick = function (event) { event = event ...

随机推荐

  1. hexo的next主题个性化教程:打造炫酷网站

    看到有些next主题的网站很炫酷,那么是怎么配置的呢?接下来我会讲一讲如何实现一些炫酷的效果 主要有以下32种: 在右上角或者左上角实现fork me on github 添加RSS 添加动态背景 实 ...

  2. python函数之调用函数

    调用函数 python中内置了许多函数,我们可以直接调用,但需要注意的是参数的个数和类型一定要和函数一致,有时候不一致时,可以进行数据类型转换 1．abs()函数[求绝对值的函数,只接受一个参数] # ...

  3. ADB指令大全

    Android Debug Bridge version 1.0.26.26 -a - directs adb to listen on all interfaces for a connection ...

  4. Android 时间轴的实现

    时间轴 时间轴,顾名思义就是将发生的事件按照时间顺序罗列起来,给用户带来一种更加直观的体验.京东和淘宝的物流顺序就是一个时间轴(如图),想必大家都不陌生. 时间轴的初探 初次见到这种UI,感觉整个布局 ...

  5. oracle 中的角色

    conn sys as sysdba;create role testrole;grant create session, create table, unlimited tablespace to ...

  6. new 关键字

    学习过的调用或者是执行函数的方式有几种? ①函数名+小括号 ②事件处理函数 ③定时器 ④数组里面的元素是函数,枚举出来执行 ⑤new关键字 提示:需要注意new 关键字需要在函数名前面使用 构造函数是 ...

  7. 本地sql大文件导入数据库

    mysql中配置my.ini interactive_timeout = 120 wait_timeout = 120 max_allowed_packet = 32M 导入sql运行命令 sourc ...

  8. Oracle EBS 应收API只创建收款没有核销行以及消息堆栈

    只创建了收款但没有创建核销行 排除其他原因 有可能是缓存溢出导致的这个要改成true 且使用消息堆栈处理

  9. Lombok在工程中的使用

    在公司的项目中应用了Lombok插件,在idea中需要启用Annotation Processors中的Enable annotation processing选项,之后才能使用Lombok的各个注解 ...

  10. 封装CoreGraphics的API简化绘图操作

    封装CoreGraphics的API简化绘图操作 效果 说明 1. 将CoreGraphics的API接口抽象为对象,让绘图变得简单易懂 2. 简化常用的绘制操作 3. 源码长期更新 源码 https ...