Javascript ScrollFire物化显示列表

您好，我正在寻找以下问题的可能解决方案

我正在建立一个网站，我有一个表，其中有许多行。 我正在使用materialize（但如果有其他插件可以做到这一点，我是开放的）

物化使用这个

 var options = [
  {selector: '#staggered-test', offset: 50, callback: function(el) {
    Materialize.toast("This is our ScrollFire Demo!", 1500 );
  } },
  {selector: '#staggered-test', offset: 205, callback: function(el) {
    Materialize.toast("Please continue scrolling!", 1500 );
  } },
  {selector: '#staggered-test', offset: 400, callback: function(el) {
    Materialize.showStaggeredList($(el));
  } },
  {selector: '#image-test', offset: 500, callback: function(el) {
    Materialize.fadeInImage($(el));
  } }
];
Materialize.scrollFire(options);

但是如何在表行上实现它呢

我只想隐藏大部分行，但用户向下滚动的次数越多，就越容易看到

这可能吗？

---

谢谢

我没有滚动，而是使用javascript和jquery制作了一个按钮来显示更多内容，这里是函数

$.fn.RowReveal = function(RowsToShow, numMore) {

var numShown = RowsToShow;
var numMore = numMore;

var $table = $(this).find('tbody');
var numRows = $table.find('tr').length;

var btn_id = parseInt(Math.random()*1000)+numRows;

// Hide rows and add clickable div
$table.find('tr:gt(' + (numShown - 1) + ')').hide().end()
    .after('<tbody id="more-'+btn_id+'"><tr><td colspan="' +
        $table.find('tr:first td').length + '"><div>Show More</div></tbody></td></tr>');

$('#more-'+btn_id).click(function () {
    numShown = numShown + numMore;
    if (numShown >= numRows) {
        $('#more-'+btn_id).remove();
    }
    if (numRows - numShown < numMore) {
        $('#more-'+btn_id+' span').html(numRows - numShown);
    }
    $table.find('tr:lt(' + numShown + ')').fadeIn();
});

$.fn.rowleave=函数（RowsToShow，numMore）{
var numShown=RowsToShow；
var numMore=numMore；
var$table=$（this.find（'tbody'）；
var numRows=$table.find（'tr'）.length；
var btn_id=parseInt（Math.random（）*1000）+numRows；
//隐藏行并添加可单击的div
$table.find（'tr:gt（+（numShown-1）+'））.hide（）.end（）
.在（'Show More'）之后；
$（“#更多-”+btn_id）。单击（函数（）{
numShown=numShown+numMore；
如果（numShown>=numRows）{
$（“#更多-”+btn_id）.remove（）；
}
如果（numRows-numShown

}