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 相关文章推荐
3款实用的在线JS代码工具(国外)
Mar 15 Javascript
jQuery easyui datagrid动态查询数据实例讲解
Feb 26 Javascript
jquery 使用简明教程
Mar 05 Javascript
JavaScript对Cookie进行读写操作实例
Jul 25 Javascript
JavaScript数组合并的多种方法
May 22 Javascript
JavaScript的变量声明提升问题浅析(Hoisting)
Nov 30 Javascript
js仿微信语音播放实现思路
Dec 12 Javascript
js实现九宫格拼图小游戏
Feb 13 Javascript
JavaScript实现全选取消效果
Dec 14 Javascript
详解使用vue-cli脚手架初始化Vue项目下的项目结构
Mar 08 Javascript
ng-repeat指令在迭代对象时的去重方法
Oct 02 Javascript
js实现旋转木马轮播图效果
Jan 10 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
ip签名探针
2006/10/09 PHP
PHP如何防止XSS攻击与XSS攻击原理的讲解
2019/03/22 PHP
PHP实现简单的协程任务调度demo示例
2020/02/01 PHP
DB.ASP 用Javascript写ASP很灵活很好用很easy
2011/07/31 Javascript
jquery重新播放css动画所遇问题解决
2013/08/21 Javascript
jquery购物车实时结算特效实现思路
2013/09/23 Javascript
JavaScript数值转换的三种方式总结
2014/07/31 Javascript
javascript动态修改Li节点值的方法
2015/01/20 Javascript
jquery实现超简洁的TAB选项卡效果代码
2015/08/28 Javascript
JavaScript实现iframe自动高度调整和不同主域名跨域
2016/02/27 Javascript
50 个 jQuery 插件可将你的网站带到另外一个高度
2016/04/26 Javascript
jQuery实现将div中滚动条滚动到指定位置的方法
2016/08/10 Javascript
PhotoSwipe异步动态加载图片方法
2016/08/25 Javascript
js图片切换具体实现代码
2016/10/13 Javascript
详解堆的javascript实现方法
2016/11/29 Javascript
JavaScript构建自己的对象示例
2016/11/29 Javascript
基于javascript实现按圆形排列DIV元素(一)
2016/12/02 Javascript
基于模板引擎Jade的应用(详解)
2017/12/12 Javascript
微信小程序自定义prompt组件步骤详解
2018/06/12 Javascript
vue draggable resizable 实现可拖拽缩放的组件功能
2019/07/15 Javascript
JS代码简洁方式之函数方法详解
2020/07/28 Javascript
js中复选框的取值及赋值示例详解
2020/10/18 Javascript
Python监控主机是否存活并以邮件报警
2015/09/22 Python
python爬虫入门教程--正则表达式完全指南(五)
2017/05/25 Python
如何使用 Pylint 来规范 Python 代码风格(来自IBM)
2018/04/06 Python
pytorch .detach() .detach_() 和 .data用于切断反向传播的实现
2019/12/27 Python
解决python虚拟环境切换无效的问题
2020/04/30 Python
Python创建简单的神经网络实例讲解
2021/01/04 Python
Python+Appium实现自动化清理微信僵尸好友的方法
2021/02/04 Python
程序运行正确, 但退出时却"core dump"了,怎么回事
2014/02/19 面试题
数学检讨书1000字
2014/02/24 职场文书
《雕塑之美》教学反思
2014/04/24 职场文书
乡镇食品安全责任书
2014/07/28 职场文书
2014校长四风问题对照检查材料思想汇报
2014/09/16 职场文书
体育教师个人总结
2015/02/09 职场文书
行政人事主管岗位职责
2015/04/11 职场文书