聊天界面定位到最底部的聊天信息

实现方法

使用JS原生提供的Element.scrollIntoView()可以定位到指定元素的位置

实现代码

    <!-- html代码 -->
    <div id='messageList'>
        <div class='message me'>1</div>
        <div class='message'>2</div>
        <div class='message me'>3</div>
        <div class='message'>4</div>
        <div class='message me'>5</div>
    </div>
    <!-- 记得引入jquery -->

    <!-- js代码 -->
     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()方法，滚动条就会定位准确