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 Prototype对象
Jan 07 Javascript
IE和Firefox下event事件杂谈
Dec 18 Javascript
JavaScript将页面表格导出为Excel的具体实现
Dec 27 Javascript
JavaScript入门教程之引用类型
May 04 Javascript
layui文件上传实现代码
May 20 Javascript
jQuery实现仿京东防抖动菜单效果示例
Jul 06 jQuery
JavaScript模板引擎原理与用法详解
Dec 24 Javascript
JavaScript从原型到原型链深入理解
Jun 03 Javascript
vue.js中ref及$refs的使用方法解析
Oct 08 Javascript
vue Treeselect 树形下拉框:获取选中节点的ids和lables操作
Aug 15 Javascript
vue 计算属性和侦听器的使用小结
Jan 25 Vue.js
vue/cli 配置动态代理无需重启服务的方法
May 20 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
星际初学者游戏中永远要做的事
2020/03/04 星际争霸
一些 PHP 管理系统程序中的后门
2009/08/05 PHP
php命令行用法入门实例教程
2014/10/27 PHP
Codeigniter检测表单post数据的方法
2015/03/21 PHP
php生成过去100年下拉列表的方法
2015/07/20 PHP
php实现微信企业号支付个人的方法详解
2017/07/26 PHP
kindeditor 加入七牛云上传的实例讲解
2017/11/12 PHP
PHP xpath提取网页数据内容代码解析
2020/07/16 PHP
js 函数的副作用分析
2011/08/23 Javascript
jquery实现图片按比例缩放示例
2014/07/01 Javascript
JavaScript、C# URL编码、解码总结
2017/01/21 Javascript
微信小程序五星评分效果实现代码
2017/04/06 Javascript
vue2.0项目中使用Ueditor富文本编辑器示例代码
2017/08/14 Javascript
React Native 集成jpush-react-native的示例代码
2017/08/16 Javascript
bootstrap fileinput实现文件上传功能
2017/08/23 Javascript
zTree异步加载展开第一级节点的实现方法
2017/09/05 Javascript
jQuery实现table表格checkbox全选的方法分析
2018/07/04 jQuery
javascript中数组的常用算法深入分析
2019/03/12 Javascript
微信小程序实现的一键复制功能示例
2019/04/24 Javascript
jQuery实现html可联动的百分比进度条
2020/03/26 jQuery
[06:40]2014DOTA2西雅图国际邀请赛 DK战队巡礼
2014/07/07 DOTA
python在控制台输出进度条的方法
2015/06/20 Python
在主机商的共享服务器上部署Django站点的方法
2015/07/22 Python
Python爬虫实现模拟点击动态页面
2020/03/05 Python
python更新数据库中某个字段的数据(方法详解)
2020/11/18 Python
详解如何用canvas画一个微笑的表情
2019/03/14 HTML / CSS
Ratchet 模态框的实现
2020/08/19 HTML / CSS
奥地利领先的在线药房:SHOP APOTHEKE
2019/10/07 全球购物
新加坡第一的杂货零售商:NTUC FairPrice
2020/12/05 全球购物
市场营销专业推荐信
2013/11/03 职场文书
宪法宣传周工作方案
2014/05/26 职场文书
优秀乡村医生事迹材料
2014/05/28 职场文书
2014物价局民主生活会对照检查材料思想汇报
2014/09/24 职场文书
2014年信访维稳工作总结
2014/12/08 职场文书
放假通知范文
2015/04/14 职场文书
Oracle数据库事务的开启与结束详解
2022/06/25 Oracle