zoukankan      html  css  js  c++  java
  • 按钮控制滚动条偏移以及判断滚动条是否到最右边

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

  • 相关阅读:
    新年献礼 技术胖262集前端免费视频 让您走的更容易些
    Eruda 一个被人遗忘的调试神器
    你(可能)不知道的web api
    含有阶乘的幂级数和
    sin x 特解的假设
    将y=arctanx展开为x的幂级数
    判断数项级数是否收敛
    ubuntu中用安装字体的方法解决文档中的音标乱码
    英语单词
    用递归实现汉诺塔
  • 原文地址:https://www.cnblogs.com/zhoushiya/p/12107312.html
Copyright © 2011-2022 走看看