JS判断指定dom元素是否在屏幕内的方法实例


Posted in Javascript onJanuary 23, 2017

前言

刷网页的时候,有时会遇到这样一个情景,当某个dom元素滚到可见区域时,它就会展现显示动画,十分有趣。那么这是如何实现的呢?

实现原理

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

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

JS判断指定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&¢erY<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元素是否在屏幕内的方法实例

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流。

Javascript 相关文章推荐
用javascript父窗口控制只弹出一个子窗口
Apr 10 Javascript
“不能执行已释放的Script代码”错误的原因及解决办法
Sep 09 Javascript
javascript模仿msgbox提示效果代码
Jun 10 Javascript
原生Js实现按的数据源均分时间点幻灯片效果(已封装)
Dec 28 Javascript
js播放wav文件(源码)
Apr 22 Javascript
JavaScript打印iframe内容示例代码
Aug 20 Javascript
js动态创建上传表单通过iframe模拟Ajax实现无刷新
Feb 20 Javascript
jQuery中live()方法用法实例
Jan 19 Javascript
Jquery结合HTML5实现文件上传
Jun 25 Javascript
JS实现图片延迟加载并淡入淡出效果的简单方法
Aug 25 Javascript
webpack本地开发环境无法用IP访问的解决方法
Mar 20 Javascript
vue界面发送表情的实现代码
Sep 11 Javascript
jQuery弹出层插件popShow用法示例
Jan 23 #Javascript
Javascript中for循环语句的几种写法总结对比
Jan 23 #Javascript
基于jQuery插件jqzoom实现的图片放大镜效果示例
Jan 23 #Javascript
JavaScript在form表单中使用button按钮实现submit提交方法
Jan 23 #Javascript
canvas绘制表盘时钟
Jan 23 #Javascript
canvas绘制的直线动画
Jan 23 #Javascript
node.js实现复制文本到剪切板的功能
Jan 23 #Javascript
You might like
php网页病毒清除类
2014/12/08 PHP
php专用数组排序类ArraySortUtil用法实例
2015/04/03 PHP
PHP中CheckBox多选框上传失败的代码写法
2017/02/13 PHP
php实现微信公众号企业转账功能
2018/10/01 PHP
一个对于js this关键字的问题
2007/01/09 Javascript
JS关键字变色实现思路及代码
2013/02/21 Javascript
JS实现的通用表单验证插件完整实例
2015/08/20 Javascript
配置Grunt的Task时通配符支持和动态生成文件名问题
2015/09/06 Javascript
JQuery.Ajax()的data参数类型实例详解
2015/11/20 Javascript
jquery判断复选框是否选中进行答题提示特效
2015/12/10 Javascript
bootstrap table复杂操作代码
2016/11/01 Javascript
浅谈js使用in和hasOwnProperty获取对象属性的区别
2017/04/27 Javascript
无限循环轮播图之运动框架(原生JS实现)
2017/10/01 Javascript
Nodejs技巧之Exceljs表格操作用法示例
2019/11/06 NodeJs
js中addEventListener()与removeEventListener()用法案例分析
2020/03/02 Javascript
用VsCode编辑TypeScript的实现方法
2020/05/07 Javascript
vue项目接口管理,所有接口都在apis文件夹中统一管理操作
2020/08/13 Javascript
python基础教程之缩进介绍
2014/08/29 Python
11个并不被常用但对开发非常有帮助的Python库
2015/03/31 Python
Centos7 Python3下安装scrapy的详细步骤
2018/03/15 Python
python 限制函数调用次数的实例讲解
2018/04/21 Python
python多线程之事件Event的使用详解
2018/04/27 Python
Python基于最小二乘法实现曲线拟合示例
2018/06/14 Python
python实现音乐下载的统计
2018/06/20 Python
浅谈dataframe中更改列属性的方法
2018/07/10 Python
python实现定时发送qq消息
2019/01/18 Python
Python实现在Windows平台修改文件属性
2020/03/05 Python
Python爬虫获取页面所有URL链接过程详解
2020/06/04 Python
python实现从ftp上下载文件的实例方法
2020/07/19 Python
python中函数返回多个结果的实例方法
2020/12/16 Python
详解通过focusout事件解决IOS键盘收起时界面不归位的问题
2019/07/18 HTML / CSS
圣诞节红领巾广播稿
2014/02/03 职场文书
联欢晚会主持词
2014/03/25 职场文书
2014年个人工作总结模板
2014/12/15 职场文书
运动会闭幕式致辞
2015/07/29 职场文书
用 Python 定义 Schema 并生成 Parquet 文件详情
2021/09/25 Python