Infinite scrolling component that works with any DOM structure and loads content lazily.
There needs to be an outer and an inner element, the outer element having
- a fixed height
- overflow auto
- position relative
The rest is up to you:
const Infinitely = require('infinitely')
const rows = []
for (let i = 0; i < 1e5; i++) {
rows.push({
foo: String(new Date()),
bar: 'beep',
beep: Math.random().toString(16).slice(2)
})
}
const inner = `<div></div>`
const outer = `<ul style="height: 800px; width: 600px; overflow: auto">${inner}</ul>`
document.body.appendChild(outer)
const example = new Infinitely({
rows,
inner,
outer,
render: row => `<li>${row.foo}: ${row.bar} (${row.beep})</li>`,
page: 100,
padding: 50
})A row element can also by an async function, which will then be resolved before rendering:
const rows = [
async () => fetch(url)
]$ npm install infinitelynew Infinitely({
rows,
inner,
outer,
render,
update,
page = 100,
padding = 50,
rowHeight,
debug = false
})Create a new instance and .render() it.
For extra performance, pass update which takes existing old row elements and updates them, instead of
creating new ones. For example:
{
render: row => `<li>${row.foo}: ${row.bar} (${row.beep})</li>`,
update: (row, el) => el.innerHTML = `${row.foo}: ${row.bar} (${row.beep})`
}Force a render, if reset is true it will also rerender already rendered rows.
Update the row content. Doesn't trigger a rerender by itself.
Update the #outer element's height. Example: infinitely.setHeight('200px').