I've been working with an HTML table structure of data and was successful in setting up a vertical list loop using some JavaScript. However, I'm facing challenges in achieving a smooth constant vertical scroll. Currently, it goes row by row when reaching the top and gets appended to itself, creating a jarring effect. Even with setInterval set to 0, there's still a brief pause. Additionally, my attempt to limit the list to 10 rows using slice sometimes doesn't work as expected. I'm not sure if this is an issue with my JavaScript code or a browser-related problem.
JS
$.fn.infiniteScrollUp=function(){
var self=this,kids=self.children()
kids.slice(10).hide()
setInterval(function(){
kids.filter(':hidden').eq(0).slideDown()
kids.eq(0).slideUp(function(){
$(this).appendTo(self)
kids=self.children()
})
},1)
return this
}
$(function(){
$('section').infiniteScrollUp()
})
HTML
<table>
<thead>
<div>
<span>a</span>
<span>b</span>
<span>c</span>
<span>d</span>
</div>
</thead>
<section>
[List of div elements representing rows]
</section>
</table>
Here is a JSFiddle