时间戳

首页 > 解决方案 > 如何在不干扰滚动位置的情况下更新 html 表格？

javascript - 如何在不干扰滚动位置的情况下更新 html 表格？

问题描述

HTML：

<div class="html_table"></div> # In html body tag.

Ajax 函数获取表数据。

var $html_table= $('.html_table');
function ajaxCallFunction() { $.ajax({
            type: 'POST',
            url: url,
            contentType: 'application/json',
            success: function(res, status, xhr){
                $html_table.html(res['html_table']);              
            },
            error:function(xhr, status, error){
            }
          });

每 5 秒更新一次表，

    window.onload = function() {            
      ajaxCallFunction();

    setInterval(ajaxCallFunction, 1000*5);
}

问题：

我在一个表中有 100 行。需要每 5 秒更新一次，而不会影响滚动的位置。当用户查看底线时，滚动条会在 5 秒后回到原来的位置。如何处理问题？

如何在不影响滚动位置的情况下更新表格的单元格值？

欢迎任何其他建议。

笔记：

就我而言，更重要的是关注当前行不应该受到影响。

标签： javascriptjqueryajax

解决方案

您可以在更改 html 之前保存当前滚动位置，并在更改 html 后恢复它。

var savedScrollPosition = $(window).scrollTop;

作为响应回调然后恢复位置：

$(window).scrollTop(savedScrollPosition);

如果请求的 HTML 与前一个不同，这当然是行不通的。在这种情况下，也许您可​​以计算相对于新旧 HTML 的高度和保存的滚动位置的真正新滚动位置。

推荐阅读