使用ajax重新加载php文件后保持div内的滚动位置

Question

我有一个带有它自己的滚动条的 div，它正在由 AJAX（php 文件）重新加载。当我在这个 div 内滚动并重新加载它时，内部滚动条会被发送回顶部。我希望滚动条保持在我最初滚动到的位置。

<style>
    #div2 {
        height: 400px;
        width: 100%;
        overflow-y:scroll;
    }
</style>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
    setInterval(function () {
        $('#div1').load('shownic8.php');
    },7000);
</script>
<div id="div1">
</div>

这是来自“shownic8.php”文件的代码

<div id="div2">
...
</div>

你能帮我保持滚动条的位置吗？非常感谢。

Answer 1

您可以使用 DOM 元素的 scrollTop 属性或同名的 jQuery 函数。

但我不建议您这样做，因为每次重新加载内容时，保存和恢复滚动位置都无法避免轻微的闪烁效果。

因此，相反，我建议更新实际更改的项目，而不是重新加载整个内容，因此 scrollTop 属性永远不会更改。

当然，（以正确的方式进行）这意味着修改您的 shownic8.php 页面（或实施另一个不同的路由）以返回一些结构化数据并使用它们来填充或更新您的 div 内容。

另一方面，您可以尝试另一种略显肮脏的方法来隐藏闪烁效果（用不太明显的副作用代替它）。那就是：

1. 不要将内容直接加载到 #div1 元素中，而是在其中创建一个新 div（通过 .append() 或 .appendTo() 追加）并加载到其中。

2. 之后（至少在重新加载操作中），删除以前的内容，以便新内容爬到顶部位置（并且不改变滚动位置）。

示例：（未经测试）

setInterval(function () {
    var prevContents = $("#div1>*");
    $('<div></div>')
        .load('shownic8.php')
        .appendTo('#div1')
    ;
    prevContents.remove();
},7000);

Answer 2

查看https://api.jquery.com/scrolltop/

1. .load()之前存储当前滚动位置：

   var pos = $('#your-container').scrollTop();

2. 使用.load()回调（http://api.jquery.com/load/）恢复滚动位置：

   $('#your-container').scrollTop(pos);

使用您的代码：

        setInterval(function () {
            var scrollTarget = $('#div1');
            var pos = scrollTarget.scrollTop();
            scrollTarget.load('shownic8.php', function() {
                $('#div1').scrollTop(pos);
            });
        },7000);