• 👨🏻‍🎓博主介绍：大家好，我是尼克.张，热爱分享知识，很高兴在这里认识大家🌟
• 🌈擅长领域：前端开发
• 🙏🏻如果本文章各位小伙伴们有帮助的话，🍭关注+👍🏻点赞+🗣评论+📦收藏，相应的有空了我也会回访，互助！！！
• 🤝另本人水平有限，旨在创作简单易懂的文章，在文章描述时如有错，恳请各位大佬指正，在此感谢！！！

虚拟滚动加载是使一定数量的dom可见，这样就能减少dom节点，当页面滚动时动态的加载可见dom，所以虽然你看见的节点都不一样，但其实就只有你看到的就那么几个。

1.要想容器里有滚动条出现，条件是外面的内容的高度低于里面的内容的高度，这是个先决条件。

2.假如容器的总高度为400px，放了10个元素，每个元素40px，假如总共有10000条数据，那么这些元素的总高度为(40 * 10000)px。

3.进行滚动事件的判断，首先获取滚动的距离e.target.scrollTop，因为每个元素40px，所以可以计算出滚动到哪个元素了，start = 距离/40；有了开始的元素，那么怎么算结尾的元素呢？因为每次展示有limit限制，所以end = start + limit，最后运用数组的slice动态截取元素。

4.看似做完了，当你滚动到了某个位置，然而那个位置却是空白？？？

原因是自己忘记让元素改变位置，滚动后元素的translateY应为你滚动的距离。

<div id="app" @scroll="handleScroll">
    <ul :style="{height:allHeight}">
        <li class="item" v-for="(item,index) in viewNum" :style="{transform: `translateY(${distance}px)`}">
            {{item}}
        </li>
    </ul>
</div>

let app = new Vue({
    el: "#app",
    data() {
        return {
            total: 100000,
            viewNum: [],
            limit: 10,
            height: 40,
            allNum: [],
            distance: 0
        }
    },
    computed: {
        allHeight() {
            const res = this.total * this.height
            return res + "px"
        }
    },
    created() {
        // 模拟数据
        for (let index = 0; index < this.total; index++) {
            this.allNum.push(index)
        }
        this.handleScroll = throttle(this.dealScroll, 0)
        this.handleScroll()
    },
    methods: {
        dealScroll(e) {
            // 滚动的距离
            this.distance = e?.target?.scrollTop || 0
            // 开始位置
            let start = parseInt(this.distance / this.height)
            //结束位置
            let end = start + this.limit
            //可见数据
            this.viewNum = this.allNum.slice(start, end)
        }
    }
})