如何通过jquery检验一个div对于用户一定可见?-问答-阿里云开发者社区-阿里云

开发者社区> 问答> 正文

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

2016-03-24 11:44:15 1567 1

目前需要时时检验一个广告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上面等等都能使其不可见,只有电脑知道,而用户的眼睛看不到,请问有没有好的方法检验一定真实可见?

取消 提交回答
全部回答(1)
  • 小旋风柴进
    2019-07-17 19:12:31

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

    0 0
相关问答

1

回答

div 用JQuery 加载一个静态网页页面

2016-07-07 14:28:09 2118浏览量 回答数 1

1

回答

请教一个关于 JQuery 自动隐藏层的问题

2016-07-08 09:55:16 1938浏览量 回答数 1

1

回答

jQuery 获取下拉选择框中指定值的文本?

2016-07-05 14:01:02 1566浏览量 回答数 1

1

回答

通过jquery 修改的dom 无法使用jquery的方法

2016-06-14 17:35:08 1475浏览量 回答数 1

1

回答

关于jquery获取data属性值的问题

2016-06-06 10:35:37 1905浏览量 回答数 1

1

回答

关于jquery的load加载表的问题

2016-06-02 16:49:46 1785浏览量 回答数 1

1

回答

jquery中如何在页面加载的时候根据action中的值的长度动态生成div

2016-06-02 18:52:45 1649浏览量 回答数 1

2

回答

jquery弹出框选择器的问题?

2016-05-31 08:56:42 1856浏览量 回答数 2

1

回答

关于jQuery和DOM之间的问题

2016-05-31 11:06:22 1762浏览量 回答数 1

1

回答

使用jquery easyui动态加载一个html片段到一个div标签中,详细见正文

2016-03-16 17:50:45 8015浏览量 回答数 1
2709
文章
6591
问答
问答排行榜
最热
最新
相关电子书
更多
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
冬季实战营第三期:MySQL数据库进阶实战
立即下载