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

近日要做一个页面功能，需要检测某个页面元素是否位于当前屏幕中的可视区域，首先想到的当然是获取offsetLeft和offsetTop，将这个值分别与body.scrollTop/scrollLeft进行比较，得出元素是否可视。

这次查资料时偶然看到了getBoundingClientRect()；该方法获得页面中某个元素的左，上，右和下分别相对浏览器视窗的位置，他返回的是一个对象，即Object，该对象有是个属性：top，left，right，bottom；这里的top、left和css中的理解很相似，但是right，bottom和css中的理解有点不一样，看示意图：

转自：http://zhouyj668.blog.163.com/blog/static/1125232802013230062896/

时间： 2024-08-11 07:36:47

判断页面元素是否进入可视区域的相关文章

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

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

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.documentElem

jQuery 判断页面元素是否存在

在传统的Javascript里,当我们对某个页面元素进行某种操作前,最好先判断这个元素是否存在.原因是对一个不存在的元素进行操作是不允许的. 例如: document.getElementById("someID").innerHTML("hi"); 如果ID为"someID"的元素不存在,我们将得到Javascript运行错误:document.getElementById("someID") is null 正确的写法应该

jQuery基础 -- 如何判断页面元素存在与否

在传统的Javascript里,当我们对某个页面元素进行某种操作前,最好先判断这个元素是否存在.原因是对一个不存在的元素进行操作是不允许的.例如: document.getElementById("someID").innerText("hi"); 如果ID为"someID"的元素不存在,我们将得到Javascript运行错误:document.getElementById("someID") is null 正确的写法应该是

expected_conditions判断页面元素

expected_condtions提供了16种判断页面元素的方法: 1.title_is:判断当前页面的title是否完全等于预期字符串,返回布尔值 2.title_contains:判断当前页面的title是否包含预期字符串,返回布尔值 3.presence_of_element_located:判断某个元素是否被加到dom树下,不代表该元素一定可见 4.visibility_of_element_located:判断某个元素是否可见,可见代表元素非隐藏,并且元素的宽和高都不为0 5.vis

selenium—用NoSuchElementException异常判断页面元素是否存在

一.知识补充 1.find_element的一种使用方法: find_element(by=方法,value=值) 例如: find_element(by="id",value="query") 2.selenium.common.exceptions模块 from selenium.common.exceptions import NoSuchElementException 使用WebDriver实施自动化过程中抛出的所有异常都是用selenium.common

Selenium(二十)：expected_conditions判断页面元素

1. 判断元素(expected_conditons) 作为一个刚刚转到python开发的小朋友,在开发前只将前辈们封装的方法看了一遍,学了一边selenium基础.看到封装的方法有什么判断元素是否存在.判断元素是否可见,而在基础知识中根本不存在,一脸懵逼. 直到写爬虫案例的时候,突然发现了selenium下的一个模块吸引了我,因为我在其他开发中根本没有碰到这个模块,所以我就去了解了一下,然后就有了这篇博客. selenium的expected_conditions模块一般也简称EC,收集了一系

判断元素是否在可视区域内

如果页面有头部置顶和底部置底的元素,需要自行进行计算: scrollTop  +   头部置顶元素高度 screenHeight - (置顶和置底元素的高度) //元素距离页面顶部的距离 var eleTop = $("#ele").offset().top; //元素本身的高度 var eleHeight = $("#ele").height(); //页面滚动的距离 var scrollTop = $(window).scrollTop(); //可视区域高度

js判断元素是否在可视区域里

js部分: //监听滚动条滑动距离 $(window).on('scroll', function(){ var scrollTop = $(document).scrollTop() var lines = $('.el_line') if (scrollTop >= 380){ $('.el_topNav').css('opacity',1) } else { $('.el_topNav').css('opacity',0) } for (var i = 0; i < lines.leng