SOURCE

const list = (() => {
    const arr = []
    for (let i = 1; i <= 200; i++) {
        arr.push(`${i}. 测试内容测试内容`)
    }
    return arr
})()


class Virtuallist {
    constructor(containerSelector, listSelector) {
        this.state = {
            dataSource: list,
            itemHeight: 20,
            viewHeight: 0,
            maxCount: 0
        }
        this.startIndex = 0
        this.endIndex = 0
        this.renderList = []
        this.scrollStyle = {}
        this.$containerEl = document.querySelector(containerSelector)
        this.$listEl = document.querySelector(listSelector)
    }
    init() {
        this.state.viewHeight = this.$containerEl.clientHeight
        this.state.maxCount = Math.ceil(this.state.viewHeight / this.state.itemHeight) + 1
        this.render()
        this.bindEvent()
    }
    bindEvent() {
        this.$containerEl.addEventListener('scroll', this.handleScroll.bind(this), false)
    }
    computedEndIndex() {
        const end = this.startIndex + this.state.maxCount
        this.endIndex = this.state.dataSource[end] ? end : this.state.dataSource.length
    }
    computedRenderList() {
        this.renderList = this.state.dataSource.slice(this.startIndex, this.endIndex)
    }
    computedScrollStyle() {
        this.scrollStyle = {
            height: `${
                this.state.dataSource.length * this.state.itemHeight - this.state.itemHeight * this.startIndex
            }px`,
            transform: `translateY(${this.state.itemHeight * this.startIndex}px)`
        }
    }
    handleScroll() {
        const { scrollTop } = this.$containerEl
        this.startIndex = Math.floor(scrollTop / this.state.itemHeight)
        this.render()
    }
    render() {
        this.computedEndIndex()
        this.computedRenderList()
        this.computedScrollStyle()
        const template = this.renderList.map(item => `<div class="box-item" data-is-even="${parseInt(item) % 2 === 0}">${item}</div>`).join('')
        this.$listEl.innerHTML = template
        this.$listEl.style.height = this.scrollStyle.height
        this.$listEl.style.transform = this.scrollStyle.transform
    }
}

const virtuallist = new Virtuallist('.container', '.box')

virtuallist.init()

<div class="container">
    <div class="box">
        <!-- 动态列表 -->
    </div>
</div>

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

.container {
    border: 1px solid plum;
    height: 200px;
    overflow: auto;
    box-sizing: content-box;
}

.box-item {
    height: 20px;
    line-height: 1;
    background: pink;
}

.box-item[data-is-even="true"] {
    background: skyblue;
}