Virtual scroll implementation for RactiveJS (For Dynamic height and equal height lists)
View the Project on GitHub svapreddy/ractive-widgets-virtual-scroll
This is a Virtual Scroll widget for RactiveJS inspired by Rich Harris's (Creator of RactiveJS) infinite scroll plugin. It excels at large data rendering in Mobiles or Desktop browsers.
<!-- Father of all below files ;) -->
<script src="lib/ractive.js"></script>
<!-- Viewport event for Ractive, required for this widget -->
<script src="lib/in-view.js"></script> [Check it here](https://github.com/svapreddy/ractive-event-viewport)
<!-- Virtual Scroll Widget -->
<script src="lib/ractive-widgets-vscroll.js"></script>
Will add user suggested features.
With the current version, you can display a data grid (Check demo.html) and can be used to make a chat box and many. This is a better alternative for jQuery's Data table or slickGrid etc.., but it does not provide straight forward methods as they provide. Moving forward, will add more features based on users suggestions.
<vScroll list='{{data}}' formatter='listItem' blockCount='100' reverse='true' />
list
Data you want to pass to the widget. Data synced with Ractive instance's data. Should be flat array of any type of data.
For example : [1,2,3,........100000] or [{a:1, b : 2}...... ] will work
formatter
formatter you want to apply to render each list item. It should be id of the script tag (without #).
For example, if you have a script tag with id "listItem" then you should pass the same id. Do not append any #
blockCount
Check "Idea behind it" section to understand this.
reverse
Whether you want to display list from bottom to top or regular. Bottom to top works as Mobiles MessageBox. Please check demo page to understand how it works.
When you pass data and blockCount(default:50), data's indexes will be spliced into block. For example if you pass data as [11,22,31,43] and blockCount as 2 then it will be spliced as [0,1], [2,3]. Upon data update splices will be updated accordingly. It follows a simple philosophy, when an block of data is on viewport display data inside, else remove inside data and by setting fake height to the element, so user will not know data is removed, but when it comes back into viewport the data for the block will be re rendered. In this way it keeps DOM minimal.
Please clone repo, and open demo.html or demo.html in any web browser. That's it. Demo.html contains two virtual scroll examples and demo2.html contains a table grid example. Note: Data used in demo part was random data taken from http://www.json-generator.com/. I do not own any rights on data, if someone feel that it is real and I should do that, please write me back.
It should work in every browser (Browsers that actually support Internet). But tested in Chrome, Mozilla and IE. Someone please test it in IE and file an issue if any.
Prathap Reddy SV, svap.reddy(at)hotmail(dot)com.
Do whatever you want to do with it. No license ;)