height cacheable virtual scroll - core only
Install with npm:
npm install virtual-scroll-core
- berlysia/react-virtual-scroll - My sample implementation. demo
WIP
Properties
items
Array<Any> original list itemsbufferSize
number number of outer items to be slicedassumedHeight
number default height for height-unknown itemsitemToCacheKey
Function use this if you like one-to-many correspondence between items and cached heights.heightCache
MapLike key-value cache
Parameters
viewportEl
ViewportElement scrolling container element (that is window in basic case)contentEl
ContentBoxElement items container elementprops
CoreOptions other properties
Parameters
item
Any value which is present in props.itemsval
number new value for cache
Returns boolean successfully updated or not
Returns CoreState next visible items
Parameters
index
number index of items
Returns number offset - offsetY for specified item
Parameters
index
number index of items
Returns number height - offsetHeight for specified item
Parameters
offset
number target offset
Returns number index - index of first item which has offset larger than given one
Returns number contentHeight - height of all items
Returns number offsetTop - offset of items container
Returns number visibleFirstIdx - index of visible first sliced item
Returns number visibleLastIdx - index of visible last sliced item
Returns number firstIdx - index of first sliced item
Returns number lastIdx - index of last sliced item
Returns Array<Any> items
Returns number length of items
Returns number last index of items
Parameters
absTopOffset
[number] absolute top offset in items container element
Returns number visibleHeight - clientHeight in container element
Returns number offsetTop - offset of items container
Properties
items
Array<Any> sliced items (to be rendered)contentHeight
number assumed height of all itemsoffsetTop
number first item should have this offsetTopfirstIdx
number first sliced indexlastIdx
number last sliced indexvisibleFirstIdx
number first visible indexvisibleLastIdx
number last visible index
Install devDependencies and Run npm test
.
or simply:
npm -d it
Pull requests and stars are always welcome. For bugs and feature requests, please create an issue.
- Fork it!
- Create your feature branch:
git checkout -b my-new-feature
- Commit your changes:
git commit -am 'Add some feature'
- Push to the branch:
git push origin my-new-feature
- Submit a pull request :D
Basic idea is derived from mir3z/react-virtual-list (MIT License).
Copyright © 2016-present berlysia. Licensed under the MIT license.