javascript判断某种元素是否进入可视区域
判断是否在指定的可视区域内,先用最简单的方式,比如整个页面为可视区域
找到几个关键因素:
sTop= $(window).scrollTop(); //滚动条距顶部的高度
clientHeight= document.documentElement.clientHeight; //可视区域的高度
pos = = $("#pointinfo_" + markers[i].id).offset().top; //指定的元素上方距顶部的高度
pos1 = $("#pointinfo_" + markers[i].id).height()+pos; //指定的元素下方距顶部的高度
所以就可以根据这个公式判断是否在可视区域内了
if ((sTop+clientHeight >= pos && sTop+clientHeight <= pos1) || (sTop >= pos && sTop <= pos1)) {
//符合条件的进入里面
}
//如果在页面指定特定的区域为可视区域,还需在调整一下,比如,页面的上方有一定的固定区域,我们可以这么来判断:
比如上方区域的高度为headerHeight
var seTop=sTop+clientHeight-headerHeight;
var shTop=sTop+headerHeight;
所以引用公式就是:
if ((seTop >= pos && seTop <= pos1) || (shTop >= pos && shTop <= pos1)) {
//符合条件的进入里面
}
比较靠谱的方法:
var sTop = $(window).scrollTop(); //滚动条距离顶端的高度
var se = document.documentElement.clientHeight; //浏览器的高度
var headerHeight = $("#header").height() + 10; //页面表头的高度
var seTop = sTop + se - headerHeight;
var shTop = sTop + headerHeight;
var pos_current = $("#").offset().top;
var pos1_current = $("#").height() + pos_current;
if ((shTop > pos1_current) || seTop < pos_current) {
//超出可是范围了
}
else
{
//在可视范围内
}
javascript判断某种元素是否进入可视区域的更多相关文章
- JS代码片段:判断一个元素是否进入可视区域
// Determine if an element is in the visible viewport function isInViewport(element) { var rect = el ...
- 如何判断元素是否在可视区域ViewPort
个性签名: 生如夏花,逝如冬雪:人生如此,何悔何怨. 前言: 经常需要计算元素的大小或者所在页面的位置,offsetWidth,clientWidth,scrollWidth,scrollTop这几个 ...
- javascript判断一个元素是另外一个元素的子元素
javascript判断一个元素是另外一个元素的子元素用途有很多,最常用的就是当点击页面的空白处去执行某些操作,比如弹出层等. function isParent (obj,parentObj){ w ...
- 使用jQuery判断元素是否在可视区域
$("#app").offset().top; offset().top表示 绝对偏移值,比如说有一个很长的页面,#app这个元素 在最底下, $("#app" ...
- 如何判断元素是否在可视区域内--getBoundingClientRect
介绍 Element.getBoundingClientRect()方法返回元素的大小及其相对于视口的位置. 根据MDN文档 getBoundingClientRect 方法返回的是一个DOMRect ...
- Vue-懒加载(判断元素是否在可视区域内)
上公式: 元素距离顶部高度(elOffsetTop) >= dom滚动高度(docScrollTop) 并且元素距离顶部高度(elOffsetTop) < (dom滚动高度 + 视窗高度) ...
- jq、js判断元素是否在可视区域内
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <style> ...
- 如何判断一个Div是否在可视区域,判断div是否可见
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 原生js获取 一个dom元素距离页面可视区域的位置值 -- getBoundingClientRect
getBoundingClientRect() 这个方法返回一个矩形对象,包含四个属性:left.top.right和bottom.分别表示元素各边与页面上边和左边的距离. var box=docum ...
随机推荐
- (转)如何处理iOS中照片的方向
如何处理iOS中照片的方向 31 May 2015 • 7 min. read • Comments 使用过iPhone或者iPad的朋友在拍照时不知是否遇到过这样的问题,将设备中的照片导出到Wind ...
- Python为什么要self
Python要self的理由 Python的类的方法和普通的函数有一个很明显的区别,在类的方法必须有个额外的第一个参数 (self ),但在调用这个方法的时候不必为这个参数赋值 (显胜于隐 的引发). ...
- nexus私服update repair index索引失败解决方案(转)
转载地址:http://blog.csdn.net/first_sight/article/details/51559086 问题描述: 搭建Maven的Nexus私服仓库,一般安装完Nexus后,默 ...
- java.lang.ClassCastException: org.slf4j.impl.Log4jLoggerFactory cannot be cast to ch.qos.logback.classic.LoggerContext问题原因及解决方法
一.错误信息 java.lang.ClassCastException: org.slf4j.impl.Log4jLoggerFactory cannot be cast to ch.qos.logb ...
- GIT 使用文档
GIT 使用文档 git clone http://wanghaiyang:Z123456w@192.168.1.118/wanghaiyang/hdtas.git git add . //添加当前文 ...
- supervisord 小记
此篇仅用作supervisord的用法,不涉及理论说明和基础介绍 supervisor(一)基础篇 使用supervisord来管理process 进程的守护神 - Supervisor superv ...
- MYSQL数据库导入数据时出现乱码的解决办法
我的一个网站在负载搞不定的情况下最终选择了数据库和程序分离的方式解决的高负载,但是再导入数据的时候出现了大量乱码,最终通过方法二解决掉导入数据的问题,后面再设计网站布局的时候数据库跟网站程序分离是个很 ...
- apply 伴生对象 单例对象
apply(): 当类或者对象有一个主要用途时,apply方法提供了很好语法机制 scala> class Foo {} defined class Foo scala> object F ...
- 为windows应用程序提供托盘图标
1>包含头文件 #include "Shellapi.h" 2>相关结构体和函数: NOTIFYICONDATA WINSHELLAPI BOOL ...
- windows server2008 kettle部署
kettle部署需要有jdk环境,所以需要配置环境变量. 1.首先配置jdk,将jdk压缩包解压到c盘下 增加系统变量:JAVA_HOME:c:\jdk 在path后追加: %JAVA_HOME%\b ...