过滤表格后滚动到最近的可见tr

时间:2016-10-16 19:02:15

标签: javascript jquery

我正在使用JQuery过滤table(在不匹配的行上调用tr.hide())。 table位于可滚动的div内。问题:遗憾的是,在过滤列表时,用户每次都会丢失他/她的滚动位置。

是否有一个干净的方式

  1. 在滚动
  2. 之前获取当前视口的顶行
  3. 如果在过滤后仍然可见,则滚动到同一行
  4. 或者,如果该行不再可见,请滚动到最近的邻居行(上方或下方),该行仍然可见

3 个答案:

答案 0 :(得分:0)

只需在要保留的行中添加锚点,并在过滤后转到此锚点

答案 1 :(得分:0)

尽管它说是实验性的,但还有element.scrollIntoView。它似乎得到了大多数主流浏览器的支持。你可以随时为那些不喜欢的人填充。

https://developer.mozilla.org/en/docs/Web/API/Element/scrollIntoView#Browser_compatibility

答案 2 :(得分:0)

看起来像这样。我不会在我的例子中使用jQuery足够使用它,所以我将留下这是读者的练习。

var rowToScrollTo = null;
for (var i = 0; i < rows.length; i++)
{
    // Find the first visible row.
    if (rows[i].offsetTop > scrollableDiv.scrollTop && shouldBeVisible(rows[i]))
    {
        rowToScrollTo = rows[i];
        break;
    }
}

// Show/hide rows

scrollableDiv.scrollTop = rowToScrollTo.offsetTop;