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 相关文章推荐
自己写了一个展开和收起的多更能型的js效果
Mar 05 Javascript
在JS中如何调用JSP中的变量
Jan 22 Javascript
javascript中eval和with用法实例总结
Nov 30 Javascript
学习javascript面向对象 理解javascript原型和原型链
Jan 04 Javascript
jQuery的each循环用法简单示例
Jun 12 Javascript
Jquery实现遮罩层的简单实例(就是弹出DIV周围都灰色不能操作)
Jul 14 Javascript
javascript input输入框模糊提示功能的实现
Sep 25 Javascript
官方推荐react-navigation的具体使用详解
May 08 Javascript
微信小程序之swiper滑动面板用法示例
Dec 04 Javascript
layui文件上传控件带更改后数据传值的方法
Sep 23 Javascript
javascript实现鼠标点击生成文字特效
Dec 24 Javascript
JavaScript实现图片放大预览效果
Nov 02 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写的小东西
2006/12/06 PHP
PHP小技巧搜集,每个PHPer都来露一手
2007/01/02 PHP
PHP5下$_SERVER变量不再受magic_quotes_gpc保护的弥补方法
2012/10/31 PHP
PHP中ajax无刷新上传图片与图片下载功能
2017/02/21 PHP
经典的带阴影的可拖动的浮动层
2006/06/26 Javascript
javascript下查找父节点的简单方法
2007/08/13 Javascript
基于jquery自定义图片热区效果
2012/07/21 Javascript
js判断输入是否为数字的具体实例
2013/08/03 Javascript
Knockout visible绑定使用方法
2013/11/15 Javascript
js检测浏览器版本、核心、是否移动端示例
2014/04/24 Javascript
TypeScript具有的几个不同特质
2015/04/07 Javascript
jQuery简单获取键盘事件的方法
2016/01/22 Javascript
基于JavaScript实现智能右键菜单
2016/03/02 Javascript
浅述Javascript的外部对象
2016/12/07 Javascript
vue实现表格增删改查效果的实例代码
2017/07/18 Javascript
jQuery实现拼图小游戏(实例讲解)
2017/07/24 jQuery
在小程序中使用Echart图表的示例代码
2018/08/02 Javascript
vue移动端使用canvas签名的实现
2020/01/15 Javascript
npm qs模块使用详解
2020/02/07 Javascript
js 使用ajax设置和获取自定义header信息的方法小结
2020/03/12 Javascript
javascript 使用sleep函数的常见方法详解
2020/04/26 Javascript
Python 字符串中的字符倒转
2008/09/06 Python
Django框架中render_to_response()函数的使用方法
2015/07/16 Python
python使用 request 发送表单数据操作示例
2019/09/25 Python
在python中利用pycharm自定义代码块教程(三步搞定)
2020/04/15 Python
关于Python3的import问题(pycharm可以运行命令行import错误)
2020/11/18 Python
python实现杨辉三角的几种方法代码实例
2021/03/02 Python
处理HTML5新标签的浏览器兼容版问题
2017/03/13 HTML / CSS
美国照明、家居装饰和家具购物网站:Bellacor
2017/09/20 全球购物
德尔福集团DELPHI的笔试题
2012/02/22 面试题
医院护士党的群众路线教育实践活动对照检查材料思想汇报
2014/10/04 职场文书
带刀到教室的检讨书
2014/10/04 职场文书
青年文明号申报材料
2014/12/23 职场文书
发票退票证明
2015/06/24 职场文书
创业计划书之校园跑腿公司
2019/09/24 职场文书
Spring Data JPA的Audit功能审计数据库的变更
2021/06/26 Java/Android