unendlich
Infinite scrolling component that works with any DOM structure and loads content lazily.
Usage
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 Unendlich = const html = const rows = for let i = 0; i < 1e5; i++ rows const inner = html``const outer = html``documentbody const example = rows inner outer html`: ()` page: 100 padding: 50
Async support
A row element can also by an async
function, which will then be resolved before rendering:
const rows = async
Installation
$ npm install unendlich
API
new Unendlich({ 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:
html`: ()` elinnerHTML = `: ()`
Unendlich#render({ refresh })
Force a render, if reset
is true
it will also rerender already rendered rows.
Unendlich#setRows(rows)
Update the row content. Doesn't trigger a rerender by itself.
Unendlich#setHeight(height, { render = true })
Update the #outer element's height. Example: unendlich.setHeight('200px')
.
License
MIT