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 viewport 扩展名：

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/。

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

2 个答案: