为了更好地理解,我尝试实现聊天框,并平滑过渡先前(上方)的聊天消息。
这里是http://jsfiddle.net/eEEGE/ http://jsfiddle.net/eEEGE/
当我单击“添加”时,我希望所有数字 1 - 9 向上滑动并在其下方附加 10-12。
或者换句话说,我希望滚动条始终滚动固定在底部。
我知道我可以在附加后重新定位滚动条,但随后我将无法看到滑动动画。
代码参考
$(document).ready(function(){
// set the default scroll bar to bottom of chat box
$(".chat-list").scrollTop($(".chat-list")[0].scrollHeight);
$("button").click(function(){
$('.chat-list li:last-child').append('10<br/>11<br/>12');
$('.chat-list li:last-child').show('slow');
});
});
<ul class="chat-list">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li style="display:none"></li>
</ul>
<button>add</button>
.chat-list{
height:100px;
overflow:auto;
}
$(document).ready(function(){
// set the default scroll bar to bottom of chat box
$(".chat-list").scrollTop($(".chat-list")[0].scrollHeight);
$("button").click(function(){
$('.chat-list li:last-child').append('10<br/>11<br/>12');
// Do a callback for show()
$('.chat-list li:last-child').show('slow', function() {
$(".chat-list").scrollTop($(".chat-list")[0].scrollHeight);
});
});
});
回调show()
这将scrollTop()
to the $('.chat-list')[0].scrollHeight
.
如果你想要一个动画,那么只需为scrollTop属性设置动画即可:
$(".chat-list").animate({
scrollTop: $(".chat-list")[0].scrollHeight
},'slow');
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)