追加元素后,滚动条位置控制

时间:2021-12-09 10:40:11


<ul class="list-group pre-scrollable" id="images_msg_ul">
<li class="list-group-item"></li>
<li class="list-group-item"></li>
<li class="list-group-item"></li>
</ul>




追加元素后,滚动条位置控制

1、控制列表 ul

//定位到底部

 $('#images_msg_ul').scrollTop( $('#images_msg_ul')[0].scrollHeight );//$('#images_msg_ul')[0].scrollHeight 是滚动列表的高度

 //相应,回到列表顶部 

 $('#images_msg_ul').scrollTop( 0 );
 
2、控制 ul 中的 li
var html = '<li class="list-group-item images_top"></li>';//加上images_top
$('#images_msg_ul li').removeClass('images_top');
$('#images_msg_ul').prepend(html);
$(".images_top").scrollIntoView();//显示追加的 li