index.html

<!doctype>
<html>
    <head>
        <style>
            body {
                margin: 0;
                font-family: sans-serif;
                display: flex;
            }
            #container {
                width: 80vw;
                height: 100vh;
                flex-grow: 1;
                scroll-behavior: smooth;
                -webkit-touch-overflow: scroll;
                -webkit-overflow-scrolling: touch;
            }
            #table {
                position: relative;
            }
            #table > .row {
                display: block;
                overflow: hidden;
                position: absolute;
                width: 100%;
            }
            #table > .row > .cell {
                display: block;
                line-height: 50px;
                box-sizing: border-box;
                overflow: hidden;
                text-align: center;
                position: absolute;
            }
            #table > .row > .cell.search-match {
                background: yellow !important;
            }
            #debug {
                top: 0;
                right: 0;
                width: 250px;
                height: 100vh;
                background: #eee;
                padding: 20px;
                margin: 0;
                box-sizing: border-box;
            }
            #debug > dt {
                display: inline-block;
                width: 66.66%;
                margin: 0 0 10px 0;
            }
            #debug > dd {
                text-align: right;
                display: inline-block;
                width: 33.33%;
                margin: 0 0 10px 0;
            }
        </style>
    </head>
    <body>
        <div id="container">
            <div id="table"></div>
        </div>
    </body>
    <script src="virtual-scroll.js"></script>
    <script>

        let cell = document.createElement('div')
        cell.setAttribute('class', 'cell')
        cell.contentEditable = true

        let ny = 10e3, nx = 100
        let data = []
        for (let i = 0; i < ny; i++) {
            let row = []
            for (let j = 0; j < nx; j++) {
                let number = Math.round(Math.random() * 100)
                row.push(number)
            }
            data.push(row)
        }

        let dataProxy = new Proxy(data, {
            deleteProperty: (target, property) => {
                delete target[property]
                return true
            },
            set: (target, property, value, receiver) => {
                target[property] = value
                if (/^\d+$/.test(property)) {
                    console.log('updated data', property, value)
                }
                return true
            }
        })

        var table = new VirtualScroll({
            element: document.getElementById('table'),
            data: dataProxy,
            cellHeight: 50,
            cellWidth: 200,
            debug: true,
            cell,
            update: (cell, value, rowNumber, columnNumber) => {
                // cell.innerHTML = String(value || '')
                cell.innerHTML = `${rowNumber}:${columnNumber}`
                let g = Math.round(value / 100 * 255)
                cell.style.background = `rgba(255, ${g}, 255, 1)`
            }
        })

    </script>
</html>