Question

我搜索更好或官方的方法来恢复我的tbody表内容的滚动位置。

tablesorter 2.26.6
jquery 2.2.3

我没有使用tablesorter插件寻呼机，因为我的所有内容都是可滚动的（不是用页面）而且我有滚动条没有滚动插件。也许这是我的问题？

tablesorter代码：

$(document).ready(function () {
   $("#fsi_srvovtable")
    .tablesorter({
      theme: "bootstrap",
      widthFixed: true,
      showProcessing   : true, 
      headerTemplate: '{content} {icon}',
      widgets: ["storage", "saveSort", "uitheme", "filter"],
      headers: { 0: { 
                        sorter: false, 
                        filter: false
                    }
               },
      widgetOptions: {
         filter_reset : 'button.reset',
         filter_hideFilters: false,
         filter_ignoreCase: true,
         filter_saveFilters: true,
         filter_cssFilter: "form-control",
      }
    })
});

表体高度为663像素，内容可滚动。

要保存滚动位置，我在stackoverflow上找到了一些提示：

   $("#fsi_srvoverview").on("scroll", function() {
      $("#fsi_scroll").html($("#fsi_srvoverview")[0].scrollTop);
      if (localStorage) {
         var posOverview = localStorage["fsi_srvoverview_scroll"];
         if (posOverview) {
            localStorage.removeItem("fsi_srvoverview_scroll");
         }
         localStorage["fsi_srvoverview_scroll"] = $("#fsi_srvoverview")[0].scrollTop;
         return true;
      }
      else {
         return false;
      }
   });

在完成所有求助或过滤后，我想恢复表格的滚动位置。

我尝试.bind("updateComplete",...和$(window).load(function(){或$(window).ready(function(){来恢复我的表体的滚动位置。但这不起作用，只有在恢复功能之前插入window.alert弹出消息（我认为现在确定它是最后一次调用）。

在网站http://callmenick.com/post/check-if-everything-loaded-with-javascript上，我找到了一个提示并构建了这个：

   $(window).load(function(){
      var everythingLoaded = setInterval(function() {
         if (/loaded|complete/.test(document.readyState)) {
            clearInterval(everythingLoaded);
            var posOverview = localStorage["fsi_srvoverview_scroll"];
            if (posOverview) {
               $("#fsi_srvoverview")[0].scrollTop = posOverview;
            }
         }
      }, 10);
   });

这有效 - 但桌子跳到开始/开始而不是到位置。

我找一个参数来禁用这个跳转，还是有更好的方法来恢复使用tablesorter的滚动位置？

问候
约亨

Answer 1

滚动位置更改的原因是因为在排序过程中，tbody被分离，因此桌面高度由浏览器自动调整。恢复tbody后，滚动条不会恢复为之前的值。

我还没有测试过这种方法，但是如果你将滚动位置保存在＆＃34; scrollStart＆＃34;和＆＃34; filterStart＆＃34;事件，然后恢复它＆＃34; filterEnd＆＃34;和＆＃34; sortEnd＆＃34;，它应该工作。以下是示例代码：

var top, left,
  $win = $(window);
$('table')
  .on('sortStart filterStart', function() {
    left = $win.scrollLeft();
    top = $win.scrollTop();
  })
  .on('sortEnd filterEnd', function() {
    $win.scrollLeft(left);
    $win.scrollTop(top);
  })
  .tablesorter();

＆＃34; updateComplete＆＃34;只有在表更新后才会触发事件（＆＃34;更新＆＃34;事件）;如果sortEnd filterEnd组合似乎无效，请尝试将其替换为tablesorter-ready。

tablesorter（mottie fork）/恢复tbody scroll pos - 正确吗？

1 个答案: