通过css3的锚定滚动属性，实现分页加载时让滚动条不闪动

html标签

div  @scroll="handleScroll" id="list-contai服务器托管网ner"
     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框架

1. 在v-for中，需要给遍历的列表的:key绑定跟列表存储数据相关的唯一值，注意不能使用index进行绑定，否则当列表最前面有新数组拼接在前面时，vue会直接替换列表中的元素，并且认为列表绑定的元素位置一直没有变动。因此需要绑定列表中元素特有的唯一值为key，最好key不要有重复或者中文，否则会报错，如案例中的:key="item.roleid+item.time+item.content"

2. 同时给div标签添加固定高度以出现滚动条，如案例中的80vh

3. 添加stytle，style="overflow-anchor:auto;overflow-y: auto;height: 80vh"

4. 注意，如果在首次进入页面时，vue会认为我们并没有进行滚动，因此不会绑定唯一值，此时我们可以手动设置scrollTop为1，让vue的v-for绑定列表元素，如案例中mounted()，页面一挂载就让div的滚动条滚动到位置1，同时如果当滚动条处于位置0时，我们需要手动把滚动条位置设置为1，这样才能触发锚定滚动，eg：

               handleScroll(e) {
                   // 滚动位置
                   const scrollTop = e.srcElement.scrollTop;
                   // 判断是否滚动到页面顶部
                   if (scrollTop === 0) {
                       const listContainer = docum服务器托管网ent.getElementById('list-container');
                       listContainer.scrollTo(0, 1)
                   }
               },
   

服务器托管，北京服务器托管，服务器租用 http://www.fwqtg.net