Editing virtual scrolling 虚拟滚动

<html>

<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta charset="utf-8" />
    <title>virtual scrolling 虚拟滚动</title>

    <script src="https://ss.netnr.com/hyperlist@1.0.0/dist/hyperlist.js"></script>
</head>

<body>

</body>

</html>

.vrow:hover {
    cursor: pointer;
    user-select: none;
    color: deeppink;
}

const container = document.createElement('ul');
const list = HyperList.create(container, {
    itemHeight: 20,
    width: '200px',
    height: '200px',

    total: 500000,

    generate(index) {
        const el = document.createElement('div');
        el.innerHTML = `ITEM ${index + 1}`;
        return el;
    },
});

Object.assign(container.style, {
    border: "1px solid #ddd",
    padding: "0.5em"
})
document.body.appendChild(container);