使用锚点定位页面位置

Posted 2020-11-03 scott_j

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

为了让数据实时显示在可视区域，可以在聊天记录展示页面标签下面增加一个空白的标签（增加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();