按钮控制滚动条偏移以及判断滚动条是否到最右边

Posted 2021-03-19 zhoushiya

$("#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="下一页" />