开发者社区> 问答> 正文

不知 如何通过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上面等等都能使其不可见,只有电脑知道,而用户的眼睛看不到,请问有没有好的方法检验一定真实可见?

展开
收起
杨冬芳 2016-06-14 17:16:24 2017 0
1 条回答
写回答
取消 提交回答
  • IT从业

    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基础,抱歉上次回答太过情绪化,做学文的研究精神应该与其他无关。

    2019-07-17 19:38:17
    赞同 展开评论 打赏
问答排行榜
最热
最新

相关电子书

更多
Python第五讲——关于爬虫如何做js逆向的思路 立即下载
现代Javascript高级教程 立即下载
JS零基础入门教程(上册) 立即下载