Question

发现这个很棒的问题/答案重新扩展jQuery以确定元素是否在屏幕外：

How to check if an element is off-screen

还发现了这篇文章，但无法用来解决问题：

http://code.tutsplus.com/tutorials/dissecting-jquery-filters--net-13954

使用scurker的（接受的答案）代码，当黄色DIV滚出屏幕时，这应警告（并隐藏元素）。它没有。找不到问题。

Raw jQuery / CSS / HTML Code (S.O. Embedded):

＆＃13;

jQuery.expr.filters.offscreen = function(el) {
  return (
              (el.offsetLeft + el.offsetWidth) < 0 
              || (el.offsetTop + el.offsetHeight) < 0
              || (el.offsetLeft > window.innerWidth || el.offsetTop > window.innerHeight)
         );
};

var d1=0,d2=0,d3=0,dir='dn',cpos=0,lpos=0;
var div1=$('#d1'),div4=$('#d4'),div5=$('#d5');
$(window).scroll(function() {
    cpos = $(window).scrollTop(); //get current scroll position
        div4.html(cpos);
    dir = (cpos>lpos) ? 'dn': 'up'; //get scroll direction
        //div5.html(dir);
    if (dir=='dn'){
        d1 = cpos + (cpos*1.25);
    }else{
        d1 = cpos - (cpos*1.25);
    }
    div1.html(d1); //update pos numbers
    
    div1.dequeue().stop().animate({'top':d1+'px'});
    lpos = cpos; //store for line 6

    div1.is(':offscreen').hide();
    div5.html(  (div1.is(':offscreen')) ? 'yup':'no' );
});

＆＃13;

html{height:1800px;}
body{background: url('http://placekitten.com/g/500/500') no-repeat center center fixed;background-size:cover;}
.divs{position:fixed;top:0;height:120px;width:60px;}
#d1{background:yellow;}

#d4{background:wheat;left:380px;}
#d5{background:white;left:440px;}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<div id="d1" class="divs"></div>
<div id="d4" class="divs"></div><!-- curr window scrollTop -->
<div id="d5" class="divs"></div><!-- curr scroll direction -->

＆＃13;

Answer 1

修改，更新

不确定是否使用:offscreen来测试元素是否为“屏幕外” - 正如原始Answer所述

取决于您对“屏幕外”的定义。是在内   视口，或在页面的已定义边界内？

编写一张支票以查看它是否在屏幕外（不是   将视口考虑在内......） - scurker

在jsfiddle，隐藏div1.is(':offscreen')元素后，false似乎返回:offscreen，在div5 html处产生“否”。相反，可以使用jQuery :hidden Selector来检查div1是:hidden

jQuery .is()返回Boolean。

at

div1.is(':offscreen').hide();

.hide() 不链接到this元素;而是链接到is()的{{1}}返回值？

尝试，更新

Boolean

jsfiddle http://jsfiddle.net/guest271314/Lzq85592/5/

扩展jQuery以在视口外创建自定义过滤器重新元素

1 个答案: