使用Html5搭建聊天界面定位到最底部的聊天信息

在日常的聊天工具中，我们打开一个聊天会话首先定位到的是最近的聊天信息，即聊天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()方法，滚动条就会定位准确