在日常的聊天工具中,我们打开一个聊天会话首先定位到的是最近的聊天信息,即聊天DIV布局的最底部
实现方法
使用JS原生提供的Element.scrollIntoView()可以定位到指定元素的位置
实现代码
<div id='messageList' style='overflow-y:auto;overflow-x: hidden;'>
<div id='message me'></div>
<div id='message'></div>
<div id='message me'></div>
<div id='message'></div>
<div id='message me'></div>
</div>
// js脚本:
// 利用定时器,图片加载完成后执行,滚动到聊天DIV底部
setTimeout(function () {
($('#messageList').children("div:last-child")[0]).scrollIntoView();
},100);
上述代码的意思是定位到聊天布局的最后一个子元素,即将聊天的滚动条自动下拉到最底部
注意事项
Element.scrollIntoView()方法是JS提供的元生方法,所以使用jQuery操作DOM获取到了jQuery对象后要使用方括号运算符将jQuery对象转为JS的DOM 对象才可以调用Element.scrollIntoView()方法
由于聊天内容的图片或语音信息加载需要一定的时间,假如马上调用Element.scrollIntoView()方法,等图片加载完成后,会改变聊天DIV滚动条的位置,所以应该使用定时器,当图片、语音信息加载完成后再执行Element.scrollIntoView()方法,滚动条就会定位准确