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 に答える