首页 > 其他 > 详细

使用锚点定位页面位置

时间:2018-05-06 12:51:12      阅读:191      评论:0      收藏:0      [点我收藏+]

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

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

 

使用锚点定位页面位置

原文:https://www.cnblogs.com/scott-j/p/8997847.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!