判断div是否在可视区内

参考：http://blog.csdn.net/fswan/article/details/17238933

html中offsetTop、clientTop、scrollTop各属性介绍

（1）scrollHeight：获取对象的高度

（2）scrollTop：获取或者设置对象最顶端和窗口中可见内容最顶端之间的距离

（3）offsetHeight:获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度

（4）offsetTop:获取对象相对于版面或由 offsetTop 属性指定的父坐标的计算顶端位置

（5）可视区的高度：window.innerHeight;

判断div是否在可视区内：

（1）获取div相对于窗口的偏移量：document.Element.offsetTop；

（2）获取窗口的高度：window.innerHeight;

（3）获取文档滚动的高度：document.body.scrollTop;

（4）如果（2）+（3）的高度>（1）进入了可视区

<!DOCTYPE html>
<html>
<head lang="en"><meta charset="UTF-8"><title></title><script>window.onload = function(event){window.onscroll = function(){//获取div距离顶部的偏移量
                var top = document.getElementById("secend").offsetTop;
                //获取屏幕高度
                var windowTop = window.innerHeight;
                //屏幕卷去的高度
                var scrollTops = document.body.scrollTop;
                if((windowTop+scrollTops)>top){alert("已经进入可视区");
                }else
                {alert("并没有进入可视区");
                }}
        }</script>
</head>
<body><div id="first" style="height: 700px;width: 200px;background: green"></div><div id="secend" style="height: 200px;width: 200px;background: red"></div>
</body>
</html>

判断div是否在可视区内相关推荐

threejs 判断对象是否在可视区内
在threejs 中判断一个对象(vector坐标)是否在相机的可视区内 let tempV = vector.applyMatrix4(camera.matrixWorldInverse).appl ...
百度地图根据经纬度判断点是否在行政区内
有时候我们需要通过经纬度判断点是否在行政区内,这个问题的解答分为3步. 1.获取点的坐标,这些一般来自于系统的自动抓取,主要记录事件发生的地理位置.这可能涉及不同坐标系的转换. 2.获取行政区多边形信 ...
android camera viewport rect,如何判断元素是否在可视区域ViewPort
个性签名: 生如夏花,逝如冬雪:人生如此,何悔何怨. 前言: 经常需要计算元素的大小或者所在页面的位置,offsetWidth,clientWidth,scrollWidth,scrollTop这几个 ...
jquery如何判断div是否隐藏
2019独角兽企业重金招聘Python工程师标准>>> 应用场景我们在项目中通过会判断某个div是否隐藏,然后执行某一个函数,或者进行一个操作,其实判断div是否隐藏的方法很简单. ...
html点击显示隐藏判断,javascript如何判断div是否隐藏？
我们在项目中通过会判断某个div是否隐藏,然后执行某一个函数,或者进行一个操作,其实判断div是否隐藏的方法很简单. JavaScript中判断div是否隐藏的方法: 第一种:使用CSS属性代码如下 ...
html判断隐藏显示,js 判断DIV是否隐藏的方法
js脚本在控制div元素在显示与隐藏之间进行切换时,如果不能确定div当前的状态,切换时往往会发生一些逻辑错误的事情,导致div元素的动态效果在切换时不是很流畅.那么飞鸟慕鱼博客就来说一说,如何判断d ...
js 判断 div 的隐藏和显示
//判断div 是否隐藏 function test(){var isHidden = $("#div").is(":hidden");if(isHidden= ...
js判断div滚动条是否滚动到底部
1.设置div固定高度,并且设置为内部超出可滚动 2.获取div标签,并获取div滚动距离顶部的高度 3.获取div的高度,如果没有给div设置高度可获取视图窗口的高度 4.获取div标签滚动高度 4 ...
jquery判断div滚动条到底部
jQuery 里和滚动条有关的概念很多,但是有三个属性和滚动条的拖动有关,就是:scrollTop.scrollLeft.scrollHeight.其中 scrollHeight 属性,互联网上几乎搜 ...
js实现在可视区内，文字图片动画效果
利用wow.min.js, animate.css 用户滚动页面的时候展示 CSS 动画效果. 官网:Animate中文网 – Animate安装.Animate使用.Animate下载下载地址:h ...

判断div是否在可视区内

判断div是否在可视区内相关推荐

最新文章

热门文章