JS代码片段:判断一个元素是否进入可视区域

// Determine if an element is in the visible viewport
function isInViewport(element) {
  var rect = element.getBoundingClientRect();
  var html = document.documentElement;
//在IE中,默认坐标从(2,2)开始计算,导致最终距离比其他浏览器多出两个像素,我们需要做个兼容。
    var top = document.documentElement.clientTop; // 非IE为0,IE为2
    var left= document.documentElement.clientLeft;

  return (
    rect.top -top >= 0 &&
    rect.left -left >= 0 &&
    rect.bottom -top <= (window.innerHeight || html.clientHeight) &&
    rect.right -left <= (window.innerWidth || html.clientWidth)
  );
}
时间: 2024-11-06 13:01:48

JS代码片段:判断一个元素是否进入可视区域的相关文章

javascript判断某种元素是否进入可视区域

判断是否在指定的可视区域内,先用最简单的方式,比如整个页面为可视区域 找到几个关键因素: sTop= $(window).scrollTop();  //滚动条距顶部的高度 clientHeight= document.documentElement.clientHeight; //可视区域的高度 pos =  = $("#pointinfo_" + markers[i].id).offset().top;    //指定的元素上方距顶部的高度 pos1  = $("#poi

判断页面元素是否进入可视区域

近日要做一个页面功能,需要检测某个页面元素是否位于当前屏幕中的可视区域,首先想到的当然是获取offsetLeft和offsetTop,将这个值分别与body.scrollTop/scrollLeft进行比较,得出元素是否可视. 这次查资料时偶然看到了getBoundingClientRect():该方法获得页面中某个元素的左,上,右和下分别相对浏览器视窗的位置,他返回的是一个对象,即Object,该对象有是个属性:top,left,right,bottom:这里的top.left和css中的理解

JS代码片段:一个日期离现在多久了

var dateDiff = function(hisTime,nowTime){ if(!arguments.length) return ''; var arg = arguments, now =arg[1]?arg[1]:new Date().getTime(), diffValue = now - arg[0].getTime(), result={ isToday:false }, minute = 1000 * 60, hour = minute * 60, day = hour

如何判断一个Div是否在可视区域,判断div是否可见

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <title>js</title> <script src="http://code.jquery.com/jquery-

js如何判断一个元素是否获得焦点

js如何判断一个元素是否获得焦点:可能在实际应用中需求不多,也或许使用以下方式判断过于直白,不过原理总是那么回事,下面就是一个简单的判断元素是否获得焦点的例子,代码如下: $("#theid").click(function(){ var act = document.activeElement.id; if(act=="theid" ){ alert("获取焦点了"); } else{ alert("没有获取焦点"); }

五年干货分享!前端开发中最常用的JS代码片段

很多网友私信我,说学到js就开始卡壳了,甚至初略的看了一下js,就跳过开始学习框架之类的.这里要提醒你,js是前端的重中之重,如果你忽视了,后果不堪设想! 学好,并熟练的运用这门编程语言真的很难吗?本篇文章为大家总结了一些前端开发中最常用的JS代码片段,希望能对大家的学习以及工作上都能有所帮助,有所收获. HTML5 DOM 选择器 javascript 代码 // querySelector() 返回匹配到的第一个元素 var item = document.querySelector('.i

判断一个元素是否是另一个元素的子元素或者父元素

判断一个元素是否是另一个元素的子元素或者父元素:在实际应用中有时候会判断某个元素是另一个元素的子元素或者父元素,下面就通过代码实例介绍一下. //判断:当前元素是否是被筛选元素的子元素 jQuery.fn.isChildOf=function(b){ return (this.parents(b).length>0); }; //判断:当前元素是否是被筛选元素的子元素或者本身 jQuery.fn.isChildAndSelfOf=function(b){ return (this.closest

javascript判断一个元素是另外一个元素的子元素

javascript判断一个元素是另外一个元素的子元素用途有很多,最常用的就是当点击页面的空白处去执行某些操作,比如弹出层等. function isParent (obj,parentObj){ while (obj != undefined && obj != null && obj.tagName.toUpperCase() != ‘BODY’){ if (obj == parentObj){ return true; } obj = obj.parentNode;

javascript selenium判断一个元素存在的方法(CukeTest环境)

1.在[features]-[step_definitions]目录下创建自己的一个js文件,内容如下 var { Given, When, Then } = require('cucumber') const { driver } = require('../support/web_driver'); const {By,until,Key} = require('selenium-webdriver'); async function isExist(ele) { var bool=null