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计算星座属相(十二生肖属相)示例代码
Jan 09 Javascript
jQuery实现感应鼠标动画效果自动伸长的输入框实例
Feb 24 Javascript
整理AngularJS中的一些常用指令
Jun 16 Javascript
JQuery通过AJAX从后台获取信息显示在表格上并支持行选中
Sep 15 Javascript
jquery实现自适应banner焦点图
Feb 16 Javascript
详解vue.js全局组件和局部组件
Apr 10 Javascript
解决vue同一slot在组件中渲染多次的问题
Sep 06 Javascript
基于Vue2实现简易的省市区县三级联动组件效果
Nov 05 Javascript
element-ui多文件上传的实现示例
Apr 10 Javascript
细述Javascript的加法运算符的具体使用
Oct 18 Javascript
JavaScript 作用域scope简单汇总
Oct 23 Javascript
聊聊vue 中的v-on参数问题
Jan 29 Vue.js
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性能优化 产生高度优化代码
2011/07/22 PHP
真正根据utf8编码的规律来进行截取字符串的函数(utf8版sub_str )
2012/10/24 PHP
php跨站攻击实例分析
2014/10/28 PHP
php+redis消息队列实现抢购功能
2018/02/08 PHP
页面版文本框智能提示JS代码
2009/11/20 Javascript
基于jquery的多彩百分比 动态进度条 投票效果显示效果实现代码
2011/08/28 Javascript
关于JS控制代码暂停的实现方法分享
2012/10/11 Javascript
使用jQuery动态加载js脚本文件的方法
2014/04/03 Javascript
jQuery插件slides实现无缝轮播图特效
2015/04/17 Javascript
PHP+jQuery+Ajax+Mysql如何实现发表心情功能
2015/08/06 Javascript
跨域请求的完美解决方法(JSONP, CORS)
2016/06/12 Javascript
浅谈jquery页面初始化的4种方式
2016/11/27 Javascript
微信小程序 less文件编译成wxss文件实现办法
2016/12/05 Javascript
nodejs+websocket实时聊天系统改进版
2017/05/18 NodeJs
ionic中的$ionicPlatform.ready事件中的通用设置
2017/06/11 Javascript
jQuery选择器之子元素选择器详解
2017/09/18 jQuery
angular中ui calendar的一些使用心得(推荐)
2017/11/03 Javascript
vue、react等单页面项目应该这样子部署到服务器
2018/01/03 Javascript
JavaScript模板引擎原理与用法详解
2018/12/24 Javascript
layer设置maxWidth及maxHeight解决方案
2019/07/26 Javascript
JavaScript DOM常用操作代码汇总
2020/07/03 Javascript
[49:27]LGD vs OG 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
[04:22]DOTA2大事件之护国神翼
2020/08/14 DOTA
python+Django+apache的配置方法详解
2016/06/01 Python
python的mysqldb安装步骤详解
2017/08/14 Python
利用django model save方法对未更改的字段依然进行了保存
2020/03/28 Python
Python实现Canny及Hough算法代码实例解析
2020/08/06 Python
处理HTML5新标签的浏览器兼容版问题
2017/03/13 HTML / CSS
NYX Professional Makeup英国官网:美国平价专业彩妆品牌
2019/11/13 全球购物
农药学硕士毕业生自荐信
2013/09/25 职场文书
机关单位人员学雷锋心得体会
2014/03/10 职场文书
小学生交通安全寄语
2015/02/27 职场文书
幼儿园安全教育月活动总结
2015/05/08 职场文书
读《钢铁是怎样炼成的》有感:百炼方成钢
2019/11/05 职场文书
HTML5来实现本地文件读取和写入的实现方法
2021/05/25 HTML / CSS
macos系统如何实现微信双开? mac登录两个微信以上微信的技巧
2022/07/23 数码科技