虚拟列表

css

      * {
            margin: 0;
            padding: 0;
        }
        body, html {
            height: 100%;
            width: 100%;
            overflow: hidden;
        }
        .itemList {
            display: flex;
            height: 100vh;
            width: 100%;
            overflow-y: auto;
            overflow-x: hidden;
        }
        .itemList .itemArea {
        }
        .itemList .scroll {
            width: 100%;
        }
        .itemList ul {
            height: 100%;
        }
        .itemList .listItem {
            height: 55px;
            border-bottom: 1px solid #000;
            padding: 0 20px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

html

<div class="itemList">
    <div class="itemArea">
    </div>
    <div class="scroll">
        <ul></ul>
    </div>
</div>

js

   class List {
        constructor(argument){
            this.el = document.querySelector(argument.el)
            this.list = argument.list
            this.itemHeight = argument.itemHeight
            this.starIndex = argument.starIndex
        }
        // 更新数据
        getData(){
            for (let i = 0; i< 100; i++){
                this.list.push({
                    title: '数据'+(i+1)
                })
            }
        }

        handleScroller(){
            return () => {
                let scrollTop = this.el.scrollTop;
                // 屏幕可视区开始索引
                let starIndex = Number.parseInt(scrollTop / this.itemHeight)
                // 屏幕可视区结束索引
                let endIndex = starIndex + Math.ceil(this.el.offsetHeight / this.itemHeight);
                if (Number(endIndex) <= (this.list.length)) {
                    this.starIndex = starIndex
                    this.el.querySelector('.scroll').style.marginTop = scrollTop + 'px'
                    this.updateDom()
                }

            }
        }
        updateDom(){
            for (let i = this.starIndex, j = 0, len = this.pageSize+this.starIndex; j<this.list.length && i < len; i++, j++ ) {
                this.el.querySelector('ul').querySelectorAll('li')[j].innerHTML =  this.list[i].title
            }
        }
        // 初始化默认数据
        default() {
            let html = "";
            for (let i = this.starIndex, j = 0, len = this.pageSize+this.starIndex; j<this.list.length && i < len; i++, j++ ) {
                html+=`<li class="listItem">${this.list[i].title}</li>`
            }
            this.el.querySelector('ul').innerHTML = html
            this.el.style.height = this.pageSize*this.itemHeight + 'px'
            this.el.querySelector('.itemArea').style.height = this.list.length*this.itemHeight + 'px'
        }

        init(){
            if (this.list.length == 0)  this.getData();
            // 获取一个滚动屏 最大可容纳 几个 子元素
            this.pageSize = Math.ceil(
                this.el.offsetHeight / this.itemHeight
            );

            // 初始化节点
            this.default()

            // 监听滚动
            this.el.addEventListener('scroll', this.handleScroller.call(this), false)
        }
    }


    var list = new List({
        list: [],
        el: '.itemList',
        itemHeight: 56,
        starIndex: 0
    })
    list.init();