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

  • 相关阅读:
    主席树套树状数组——带修区间第k大zoj2112
    卢卡斯定理——应用hdu4349
    没这5个证 付完钱房子也不是你的!
    Java transient关键字使用小记
    线性结构与非线性结构
    java事件处理机制(自定义事件)
    反射setAccessible()方法
    排序
    [JIRA] 最新Linux安装版本jira6.3.6安装破解以及数据导入的详细步骤
    深入研究java.lang.ThreadLocal类
  • 原文地址:https://www.cnblogs.com/zhoushiya/p/12107312.html
Copyright © 2011-2022 走看看