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 相关文章推荐
缓动函数requestAnimationFrame 更好的实现浏览器经动画
Dec 07 Javascript
jQuery实现带滚动线条导航效果的方法
Jan 30 Javascript
详解JavaScript中循环控制语句的用法
Jun 03 Javascript
一篇文章掌握RequireJS常用知识
Jan 26 Javascript
js,jq,css多方面实现简易下拉菜单功能
May 13 Javascript
深入理解react-router@4.0 使用和源码解析
May 23 Javascript
使用3D引擎threeJS实现星空粒子移动效果
Sep 13 Javascript
纯js+css实现仿移动端淘宝网站的弹出详情框功能
Dec 29 Javascript
ElementUI Tree 树形控件的使用并给节点添加图标
Feb 27 Javascript
VueCli4项目配置反向代理proxy的方法步骤
May 17 Javascript
jQuery实现简单QQ聊天框
Aug 27 jQuery
详解Vue的mixin策略
Nov 19 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
Terran热键控制
2020/03/14 星际争霸
浅析PHP程序防止ddos,dns,集群服务器攻击的解决办法
2013/06/18 PHP
PHP如何读取由JavaScript设置的Cookie
2017/03/22 PHP
PHP 7安装调试工具Xdebug扩展的方法教程
2017/06/17 PHP
JS中彻底删除JSON对象组成的数组中的元素
2020/09/22 PHP
HTML TO JavaScript 转换
2006/06/26 Javascript
解决Extjs4中form表单提交后无法进入success函数问题
2013/11/26 Javascript
JS动态增加删除UL节点LI及相关内容示例
2014/05/21 Javascript
JS简单实现数组去重的方法示例
2017/03/27 Javascript
使用JavaScript实现一个小程序之99乘法表
2017/09/21 Javascript
JS/HTML5游戏常用算法之碰撞检测 地图格子算法实例详解
2018/12/12 Javascript
基于JS实现前端压缩上传图片的实例代码
2019/05/14 Javascript
javascript实现评分功能
2020/06/24 Javascript
openlayers实现地图弹窗
2020/09/25 Javascript
[01:03:36]DOTA2-DPC中国联赛 正赛 VG vs Magma BO3 第二场 1月26日
2021/03/11 DOTA
python的类变量和成员变量用法实例教程
2014/08/25 Python
在Python中用has_key()方法查找键是否存在的教程
2015/05/21 Python
Django中模型Model添加JSON类型字段的方法
2015/06/17 Python
python+django快速实现文件上传
2016/10/24 Python
使用Python快乐学数学Github万星神器Manim简介
2019/08/07 Python
django-crontab实现服务端的定时任务的示例代码
2020/02/17 Python
python 如何利用argparse解析命令行参数
2020/09/11 Python
python正则表达式re.match()匹配多个字符方法的实现
2021/01/27 Python
美国女性运动零售品牌:Lady Foot Locker
2017/05/12 全球购物
美国女士内衣在线折扣商店:One Hanes Place
2019/03/24 全球购物
汉米尔顿手表官网:Hamilton
2020/09/13 全球购物
如何现实servlet的单线程模式
2014/08/05 面试题
JSP&Servlet技术面试题
2015/05/21 面试题
广播电视新闻学专业应届生求职信
2013/10/08 职场文书
商场总经理岗位职责
2014/02/03 职场文书
节约用水标语
2014/06/11 职场文书
副主任竞聘演讲稿
2014/08/18 职场文书
2014年减负工作总结
2014/12/10 职场文书
质检员岗位职责范本
2015/04/07 职场文书
给原生html中添加水印遮罩层的实现示例
2021/04/02 Javascript
使用Cargo工具高效创建Rust项目
2022/08/14 Javascript