1

jquery animate関数を使用してリスト項目のスクロールを行っていますhtmlコードは以下です

<ul>
    <div class="scrollable" id="web_list">
        <div class="updown">
            <a class="up" onclick="scrollUp('web_list')">UP</a>
        </div>
        <div class="items">
            <li>item 1<li>
            <li>item 2</li>
            <li>item 3</li>
            <li>item 4</li>
            <li>item 5</li>
        <div class="updown">
            <a class="down" onclick="scrollDown('web_list')">DOWN</a>
        </div>
</ul>

そしてJSで

function scrollDown(scrollDiv){
    $('#'+''+scrollDiv+' .items li').animate({top:'-=43'});
}

function scrollUp(scrollDiv){
    $('#'+''+scrollDiv+' .items li').animate({top:'+=43'});
}

CSSで

.scrollable .items li {
  position:relative;
  overflow: hidden;
 }

これでリストをスクロールできます. しかし問題はスクロールを止められないことです. スクロールが無限に続きます.

最後のアイテムが一番下に表示されたときにスクロール（上下）を停止して、ユーザーがそれが最後のアイテムであることを理解できるようにします。誰でもこれを行うのを手伝ってもらえますか。そしてもう1つ、リストのスクロールを実装するのは良い考えです。

4

1 に答える 1

1

これはどう？

 if( $("div.items:first").offset().top + $("div.items:first").height() <= 
     $("div.items:first li.items:last").offset().top + 
     $("div.items:first li.items:last").height()     
    ){
            //stop scrolling
            $("a.down").hide()
    }
于 2012-08-08T06:17:13.353 に答える