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 相关文章推荐
Extjs TimeField 显示正常时间格式的代码
Jun 28 Javascript
JavaScript转换二进制编码为ASCII码的方法
Apr 16 Javascript
js同源策略详解
May 21 Javascript
javascript中$(function() {});写与不写有哪些区别
Aug 10 Javascript
javascript常用的方法整理
Aug 20 Javascript
微信小程序 MINA文件结构
Oct 17 Javascript
详解百度百科目录导航树小插件
Jan 08 Javascript
Vue 2.x教程之基础API
Mar 06 Javascript
webpack4之SplitChunksPlugin使用指南
Jun 12 Javascript
vue项目打包上传github并制作预览链接(pages)
Apr 19 Javascript
vuex存取值和映射函数使用说明
Jul 24 Javascript
详解VUE中的插值( Interpolation)语法
Oct 18 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 中dirname(_file_)讲解
2007/03/18 PHP
php操作SVN版本服务器类代码
2011/11/27 PHP
解析dedecms空间迁移步骤详解
2013/05/15 PHP
PHP APC配置文件2套和参数详解
2014/06/11 PHP
php遍历、读取文件夹中图片并分页显示图片的方法
2016/11/15 PHP
PHP基于ICU扩展intl快速实现汉字转拼音及按拼音首字母分组排序的方法
2017/05/03 PHP
关于Laravel-admin的基础用法总结和自定义model详解
2019/10/08 PHP
PHP实现图片防盗链破解操作示例【解决图片防盗链问题/反向代理】
2020/05/29 PHP
javascript-TreeView父子联动效果保持节点状态一致
2007/08/12 Javascript
JS 实现双色表格实现代码
2009/11/24 Javascript
jquery select操作的日期联动实现代码
2009/12/06 Javascript
XENON基于JSON变种
2010/07/27 Javascript
YUI Compressor压缩JavaScript原理及微优化
2013/01/07 Javascript
jquery 按键盘上的enter事件
2014/05/11 Javascript
Jquery 效果使用详解
2015/11/23 Javascript
详解数组Array.sort()排序的方法
2020/05/09 Javascript
Angular实现图片裁剪工具ngImgCrop实践
2017/08/17 Javascript
详解mpvue开发小程序小总结
2018/07/25 Javascript
js实现图片局部放大效果详解
2019/03/18 Javascript
python+selenium+autoit实现文件上传功能
2017/08/23 Python
CentOS7下python3.7.0安装教程
2018/07/30 Python
python 读取dicom文件,生成info.txt和raw文件的方法
2019/01/24 Python
Python实现自定义读写分离代码实例
2019/11/16 Python
Python实现常见的几种加密算法(MD5,SHA-1,HMAC,DES/AES,RSA和ECC)
2020/05/09 Python
SQL面试题
2013/04/30 面试题
技术经理的自我评价范文
2013/12/03 职场文书
2014年计算机专业个人自我评价
2014/01/19 职场文书
党员大会主持词
2014/04/02 职场文书
法制宣传标语
2014/06/23 职场文书
2014年餐厅服务员工作总结
2014/11/18 职场文书
2014酒店客房部工作总结
2014/12/16 职场文书
行政复议决定书
2015/06/24 职场文书
中国古代史学名著《战国策》概述
2019/08/09 职场文书
8g内存用python读取10文件_面试题-python 如何读取一个大于 10G 的txt文件?
2021/05/28 Python
Redis缓存-序列化对象存储乱码问题的解决
2021/06/21 Redis
SQL模糊查询报:ORA-00909:参数个数无效问题的解决
2021/06/21 Oracle