按钮控制滚动条偏移以及判断滚动条是否到最右边
作者:互联网
$("#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="下一页" />
标签:scrollLeft,var,滚动条,width,偏移,按钮,parseInt,ulContainer 来源: https://www.cnblogs.com/zhoushiya/p/12107312.html