通过css3的锚定滚动属性,实现分页加载时让滚动条不闪动
2023-12-13 05:39:54
html标签
<div @scroll="handleScroll" id="list-container"
style="overflow-anchor:auto;overflow-y: auto;height: 80vh">
<ul id="talks"
v-for="(item,index) in msgList"
:key="item.roleid+item.time+item.content">
<li >
<div>
<span class="message-data-time"> {{item.rolename}}{{item.roleid}}{{ ' ' }}{{ item.time | formatTime }}</span>
</div>
<div>
<span>{{item.content}}</span>
</div>
</li>
</ul>
</div>
Vue生命周期中的mounted挂载,监听滚动事件
mounted() {
// 给div标签添加监听滚动事件
window.addEventListener('scroll', this.handleScroll);
const listContainer = document.getElementById('list-container');
listContainer.scrollTo(0, 1)
},
步骤
使用的是vue2框架
-
在v-for中,需要给遍历的列表的:key绑定跟列表存储数据相关的唯一值,注意不能使用index进行绑定,否则当列表最前面有新数组拼接在前面时,vue会直接替换列表中的元素,并且认为列表绑定的元素位置一直没有变动。因此需要绑定列表中元素特有的唯一值为key,最好key不要有重复或者中文,否则会报错,如案例中的
:key="item.roleid+item.time+item.content"
-
同时给div标签添加固定高度以出现滚动条,如案例中的80vh
-
添加stytle,
style="overflow-anchor:auto;overflow-y: auto;height: 80vh"
-
注意,如果在首次进入页面时,vue会认为我们并没有进行滚动,因此不会绑定唯一值,此时我们可以手动设置scrollTop为1,让vue的v-for绑定列表元素,如案例中mounted(),页面一挂载就让div的滚动条滚动到位置1,同时如果当滚动条处于位置0时,我们需要手动把滚动条位置设置为1,这样才能触发锚定滚动,eg:
handleScroll(e) { // 滚动位置 const scrollTop = e.srcElement.scrollTop; // 判断是否滚动到页面顶部 if (scrollTop === 0) { const listContainer = document.getElementById('list-container'); listContainer.scrollTo(0, 1) } },
文章来源:https://blog.csdn.net/Hunter_Kevin/article/details/134951619
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。 如若内容造成侵权/违法违规/事实不符,请联系我的编程经验分享网邮箱:veading@qq.com进行投诉反馈,一经查实,立即删除!
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。 如若内容造成侵权/违法违规/事实不符,请联系我的编程经验分享网邮箱:veading@qq.com进行投诉反馈,一经查实,立即删除!