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

开发者社区> 问答> 正文

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

2016-03-24 11:44:15 1526 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
相关问答

12

回答

在阿里云上安装和运行Node.js全功略

ycwong 2013-09-18 15:17:30 67019浏览量 回答数 12

19

回答

【分享】如何提高网站的打开速度?

enj0y 2012-11-17 14:35:22 58082浏览量 回答数 19

145

回答

【新手入门】云服务器linux使用手册

fanyue88888 2012-11-26 17:14:18 160144浏览量 回答数 145

28

回答

钉钉开放平台“常见问题常见问题常见问题“重要请关注

竹梅 2015-12-03 00:39:14 96805浏览量 回答数 28

22

回答

爬虫数据管理【问答合集】

我是管理员 2018-08-10 16:37:41 149099浏览量 回答数 22

31

回答

[@倚贤][¥20]刚学完html/css/js的新手学习servlet、jsp需要注意哪些问题?

弗洛伊德6 2018-10-27 21:52:43 148328浏览量 回答数 31

23

回答

【云服务器分享】网站访问速度快才是硬道理

dreamdoo 2012-10-15 10:15:02 86622浏览量 回答数 23

13

回答

【云服务器分享】如何节省网站流量

dreamdoo 2012-10-15 10:36:09 81884浏览量 回答数 13

15

回答

对象存储oss【问答合集】

我是管理员 2018-08-03 14:54:02 69751浏览量 回答数 15

3

回答

Nginx—owncloud安装记事

寒喵 2014-06-07 23:24:41 49816浏览量 回答数 3
2710
文章
6591
问答
问答排行榜
最热
最新
相关电子书
更多
JS零基础入门教程(上册)
立即下载
性能优化方法论
立即下载
手把手学习日志服务SLS,云启实验室实战指南
立即下载