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)) {

  //符合条件的进入里面

}

时间: 2024-12-29 07:55:20

javascript判断某种元素是否进入可视区域的相关文章

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

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

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

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

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

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

如果页面有头部置顶和底部置底的元素,需要自行进行计算: 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

如何判断一个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-

判断dom原始是否在可视区域内

isElementInViewport (el, offset = 0) { const box = el.getBoundingClientRect(), top = (box.top >= 0), left = (box.left >= 0), bottom = (box.bottom <= (window.innerHeight || document.documentElement.clientHeight) + offset), right = (box.right <=

js可视区域图片懒加载

可视区域图片懒加载 实现原理,页面滚动时获取需要懒加载的图片,判断此图片是否在可视区域内,是则设置图片data-src地址为src地址,加载图片. <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>jquery可视区域图片懒加载</title> <script src="http://libs.baidu.com/jquery/2

js滚动及可视区域的相关的操作

element.getBoundingClientRect 判断指定元素相对于页面可视窗口的位置信息,通常结合windows.onScroll方法使用,当element.getBoundingClientRect.Top<=document.documentElement.clientHeight时表示该元素在可视范围内. 详细介绍 IntersectionObserver对象 异步监听目标元素与其祖先或视窗的位置信息,通常用于替代element.getBoundingClientRect+wi