1

我需要知道如何获得在浏览器视图中可见的第一个元素。

我正在实现一个自定义滚动条。但是，当用户使用鼠标滚动时，我的自定义滚动条会混乱。滚动后我需要在浏览器的可见区域中找到可见的 div，这样我才能滚动到正确的元素。

这是我的页面的结构：

<div class="page">

    <div id="scroller" class="news-scroller">
         <div ><span id="up"></span></div>
         <div ><span id="down"></span></div>
    </div>

    <div class="news">
    </div>
    <div class="news">
    </div>
    ....
</div>

我正在使用滚动条#up 和#down 滚动到上一个或下一个 div.news。（我使用 scrollTo 插件）但是在使用鼠标滚动后，我需要了解哪个 div.news 是页面中第一个可见元素以重置我的自定义滚动条。

这是我的代码以防万一：

var current = $(".news").eq(0);

$("#down").click(function(){
    if(current.next().size() > 0)
    {
        current = current.next();
        $.scrollTo("#"+current.attr("id"), 800);     

    }
    else  if(current.next().size() <= 0)
    {
        return
    }
});

$("#up").click(function(){
    if(current.prev().size() > 0)
    {
        current=current.prev();
        $.scrollTo("#"+current.attr("id"), 800);
    }
    else  if(current.prev().size() <= 0)
    {
        return;
}
});

这是示例页面。

4

1 回答 1

2

以下代码将告诉您元素是否完全可见。

function isElementVisisble(element) {
          element = $(element);
           var parent = $(window);
        var containerLeft = parent.parent().scrollLeft();
        var containerRight = containerLeft + parent.parent().width();
        var elemLeft = element.offsetLeft;
        var elemRight = elemLeft + $(element).width();
        if (elemLeft < containerLeft || elemRight > containerRight) {
            return false;
        }
         return true;
    }

您可以使用

   var firstVisibleElem;
    jQuery("*").each(function(){
        if(isElementVisisble(this)){
             firstVisibleElem= this;
              return false;
         }
    });
于 2012-09-20T16:53:21.490 回答