<template>
<div class="cont">
//box 视图区域Y轴滚动 滚动的是box盒子 滚动条显示的也是因为box<div class="box">//itemBox。 一个空白的盒子 计算高度为所有数据的高度 固定每一条数据高度为50px<div class="itemBox" :style="{height:list.length*50+'px'}"><div v-for="(v,i) in showList" :style='{top: `${v.top}px`}' class="item" :key="i">{{ v.name }}</div></div></div>
</div>
</template>

<script>
export default {data() {return {list: [],   //实际数据showList: [],  //渲染数据}},methods: {//滚动事件 动态去截取数据塞进showListhandleScroll() {let box = document.querySelector('.box')let scrollTop = box.scrollToplet num = Math.ceil(scrollTop / 50)let arr = this.list.slice(num, num + 20)arr.forEach((v, i) => {v.top = (num + i) * 50 //动态计算每一条数据的位置})this.showList = arr}},mounted() {//模拟生产10000条数据for (let i = 0; i < 10000; i++) {this.list.push({name: '测试测试测' + i,})}//注册滚动事件let box = document.querySelector('.box')box.addEventListener('scroll', this.handleScroll)//初始渲染数据let arr = this.list.slice(0, 20)arr.forEach((v, i) => {v.top = i * 50})this.showList = arr}}
</script>

<style lang="scss" scoped>
.box {width: 600px;height: 800px;overflow-y: auto;background-color: #eee;margin: 0 auto;.itemBox {position: relative;.item {height: 50px;line-height: 50px;position: absolute;}}}
</style>

dom中始终只显示20条dom数据，只适用固定行高度的场景