virtual-scroll-core

height cacheable virtual scroll - core only

Install

Install with npm:

npm install virtual-scroll-core

Usage

WIP

API

CoreOptions

Properties

• items Array<Any> original list items
• bufferSize number number of outer items to be sliced
• assumedHeight number default height for height-unknown items
• itemToCacheKey Function use this if you like one-to-many correspondence between items and cached heights.
• heightCache MapLike key-value cache

VirtualScrollCore

constructor

Parameters

• viewportEl ViewportElement scrolling container element (that is window in basic case)
• contentEl ContentBoxElement items container element
• props CoreOptions other properties

updateCache

Parameters

• item Any value which is present in props.items
• val number new value for cache

Returns boolean successfully updated or not

update

Returns CoreState next visible items

reset

clearCache

getOffsetByIndex

Parameters

• index number index of items

Returns number offset - offsetY for specified item

getHeightByIndex

Parameters

• index number index of items

Returns number height - offsetHeight for specified item

getIndexByOffset

Parameters

• offset number target offset

Returns number index - index of first item which has offset larger than given one

getContentHeight

Returns number contentHeight - height of all items

getOffsetTop

Returns number offsetTop - offset of items container

getVisibleFirstIndex

Returns number visibleFirstIdx - index of visible first sliced item

getVisibleLastIndex

Returns number visibleLastIdx - index of visible last sliced item

getFirstIndex

Returns number firstIdx - index of first sliced item

getLastIndex

Returns number lastIdx - index of last sliced item

getItems

Returns Array<Any> items

getItemsLength

Returns number length of items

getItemsLastIndex

Returns number last index of items

getVisibleHeight

Parameters

• absTopOffset [number] absolute top offset in items container element

Returns number visibleHeight - clientHeight in container element

getScrollTop

Returns number offsetTop - offset of items container

CoreState

Properties

• items Array<Any> sliced items (to be rendered)
• contentHeight number assumed height of all items
• offsetTop number first item should have this offsetTop
• firstIdx number first sliced index
• lastIdx number last sliced index
• visibleFirstIdx number first visible index
• visibleLastIdx number last visible index

Running tests

Install devDependencies and Run npm test. or simply:

npm -d it

Contributing

Pull requests and stars are always welcome. For bugs and feature requests, please create an issue.

1. Fork it!
2. Create your feature branch: git checkout -b my-new-feature
3. Commit your changes: git commit -am 'Add some feature'
4. Push to the branch: git push origin my-new-feature
5. Submit a pull request :D

Special Thanks

Basic idea is derived from mir3z/react-virtual-list (MIT License).

License

Copyright © 2016-present berlysia. Licensed under the MIT license.