首页 > 如何通过jquery检验一个div对于用户一定可见?

如何通过jquery检验一个div对于用户一定可见?

目前需要时时检验一个广告div始终展示在网页中,但是,即使这个div满足以下条件:

#ad_wrapper{
display:block;
visibility:visible;
z-index:999999;
opacity:1;
font-size:14px;
position:absolute;
}

但是,如果#adWrapper的margin-left:-9999999999px;或者text-indent:99999999px;或者color:#fff或者top:-999999px或者一个div覆盖在#ad_wrapper上面等等都能使其不可见,只有电脑知道,而用户的眼睛看不到,请问有没有好的方法检验一定真实可见?


jQuery本身不直接提供这样的方法,本身只有visible去判断元素是否可见,但对漂移到屏幕外或行高设的非常小无能为力。一些sticky插件是通过计算offset去确定元素位置/是否在屏幕里。

你需要自己写函数或者直接增强jQuery的选择器,我最近几个月没写Javascript,没办法马上给你代码。但从网上摘抄了一段,原理都一样。

//增强jQuery选择器中筛选器的部分、增加一个名为cheat的筛选项
//jQuery选择器中的$('#id:first'), :后面的部分就这么实现的
$.expr.filters.cheat = function(element) {
  return (
              //如果元素不在屏幕可见区域返回true
              (element.offsetLeft + element.offsetWidth) < 0 
              || (element.offsetTop + element.offsetHeight) < 0
              || (element.offsetLeft > window.innerWidth || element.offsetTop > window.innerHeight)
         );
};

上面的仅仅判断了是否元素在可见区域中,如果滚动出去或CSS改变margin负数很大(移出去)就会返回true,只是很简单的判断,你可以根据需求继续加条件,例如检查CSS中的某一项是否小于某个数值(Number(element.css('font-size').replace(/px$/, '')) < 2)。

上面的增强,可以用以下几种方式使用,假设元素#cool位置在屏幕可见位置内。

$('#cool:cheat'); //选不到到该元素
$('#cool').is(':cheat'); //false
$('#cool').not(':cheat'); //true

需要有点Javascript基础,抱歉上次回答太过情绪化,做学文的研究精神应该与其他无关。

【热门文章】
【热门文章】