按鈕控制滾動條偏移以及判斷滾動條是否到最右邊

$("#btnNext").click(function () {

                $("#dvContainer").animate({ scrollLeft: dvContainer.scrollLeft + 100 }, function () {    //點擊btnNext的時候，外層容器的滾動條右移100px

                    var n1 = parseInt(this.scrollLeft);    //外層容器的右移長度

                    var n2 = parseInt(this.clientWidth);    //外層容器的寬度

                    var n3 = parseInt(this.scrollWidth);    //外層容器實際寬度，當沒有滾動條時與clientWidth相等

                    if(n1 + n2 == n3) 

                    {

                        alert('終於到達最右端')

                        $("#ulContainer").width($("#ulContainer").width() + 60);

                        alert($("#ulContainer").width())

                        $("#ulContainer").append("<li>123</li>");

                    };

                });

            });

 

html代碼：

 <input type="button" id="btnPre" value="上一頁" />

    <div id="dvContainer" style="width: 500px; height: 50px; overflow-x: scroll; border: 2px solid #f00; padding: 5px;">

           <!-- 外層div限制寬度，超出部分顯示滾動條 --!>

        <ul id="ulContainer">   <!-- 里層ul不做寬度限制，但是要根據li的數量寬度增加（必須能容納li），不然會導致排列到下一行 --!>

            <asp:Repeater ID="rpt" runat="server">

                <ItemTemplate>

                    <li>ascascqw</li>

                </ItemTemplate>

            </asp:Repeater>

        </ul>

    </div>

    <input type="button" id="btnNext" value="下一頁" />