使用锚点定位页面位置

类似聊天页面,新的消息会显示在页面的最下面,但默认只是数据加载了,页面位置还是当前位置。

为了让数据实时显示在可视区域,可以在聊天记录展示页面标签下面增加一个空白的标签(增加ID),通过动态定位该标签实现。

如下代码:

<div id="chatDiv">
    <div class="chat">聊天内容1</div>
    <div class="chat">聊天内容2</div>
    <div class="chat">聊天内容3</div>
</div>
<div id="bottomDiv" style="width:10px;height:10px"></div>

如上代码定义了锚点:<div id="bottomDiv" style="width:10px;height:10px"></div>

在有信心聊天内容产生后,通过js代码定位

如下代码:

//业务代码

document.getElementById('bottomDiv').scrollIntoView();

 

posted @ 2018-05-06 12:18  scott_j  阅读(427)  评论(0编辑  收藏  举报