元素中的jquery滚动检查向上/向下滚动，可见/不

Question

我有菜单。

<ul>
    <li>item1</li>
    <li>item2</li>
    <li>item3</li>
    <li>item4</li>
    <li>item5</li>
    <li>item6</li>
    <li>item7</li>
    <li>item8</li>
    <li>item9</li>
    <li>item10</li>
    <li id="current">item11</li>
    <li>item12</li>
    <li>item13</li>
    <li>item14</li>
    <li>item15</li>
    <li>item16</li>
    <li>item17</li>
    <li>item18</li>
    <li>item19</li>
    <li>item20</li>
    <li>item21</li>
</ul>

ul可以用鼠标滚动。

ul{width:100px;height:200px;overflow-x:hidden;overflow-y:auto}
li{float:left;overflow:hidden;width:100px;font:14px/24px arial;border-bottom:1px solid #ddd;}
#current{background:#ccc;}

现在我想检测#current何时不可见，在鼠标向上滚动和鼠标向下滚动的情况下。

jQuery(document).ready(function(){
    var lastscrollposition = $('#current').scrollTop();
    $("ul").bind('scroll',function(){
        var currentscrollposition = $('#current').scrollTop();
        if(!$('#current').is(':visible')){
            if (currentscrollposition > lastscrollposition){           
               //fixed #current position on the top of the ul
            }else{
               //fixed #current position on the bottom of the ul
           }
       }
       lastscrollposition = currentscrollposition;
    });
});

但是jquery代码没有运行，希望有人能帮我，谢谢。

http://jsfiddle.net/UT7uU/中的在线代码

感谢所有的更新。最后，这个问题并不像我最初想的那样困难。它只是在$('#current').offset().top和$('ul').offset().top之间做出判断。

jQuery(document).ready(function(){
    $("ul").bind('scroll',function(){
        if($('#current').offset().top<$('ul').offset().top) {         
               alert('aaa');//fixed #current position on the top of the ul
        }else if($('#current').offset().top>($('ul').offset().top+$('ul').height())) {   
               alert('bbb');//fixed #current position on the bottom of the ul
       }
    });
});

参见http://jsfiddle.net/UT7uU/14/中的演示

打招呼。

Answer 1

我想问的最好的方法是：“这真的在屏幕上吗？”是jQuery 视图扩展：

http://www.appelsiini.net/projects/viewport

将代码制作成：

if(!$('#current').is(':in-veiwport')){ ...

或者，更容易：

if($('#current').not(':in-veiwport')){ ...

Answer 2

：选择器不考虑滚动条：

如果元素占用文档中的空间，则认为它们是可见的。可见元素的宽度或高度大于零。 具有可见性:隐藏或不透明:0的元素被认为是可见的，因为它们仍然占用布局中的空间。 文档中没有的元素被认为是隐藏的；jQuery没有一种方法可以知道它们在附加到文档时是否是可见的，因为它取决于适用的样式。 ..。 (http://api.jquery.com/visible-selector/)

我敢打赌，您必须做一些手工工作，以确定元素是否是滚动的。像这样的例子：

function isCurrentInUlViewport() {
  var heightOfUl = $('ul').height();
  var positionOfCurrent = $('#current').position().top

  return positionOfCurrent < heightOfUl && positionOfCurrent > 0
}

代码段需要进一步的调整，以便考虑到#current元素的高度。还假定ul是#current的偏移父级。有关更多详细信息，请参阅http://api.jquery.com/position/。