Question

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

./
|
|-- (_dev)
|     |
|     |---(less)
|     |    |
|     |    |---[index.less]
|     |    |---(components)
|     |         |
|     |         |---[component.less]
|     |
|     |---[webpack.config.js]
|
|-- (img)
|    |
|    |---[bankwire.jpg]
|    |---[bankwire-2.jpg]
|
|-- (css)
|    |
|    |---[main.css]

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

<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>

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

Answer 1

选中https://api.jquery.com/scrolltop/

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

var pos = $('#your-container').scrollTop();
使用.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);

Answer 2

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

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

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

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

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

与其将您的内容直接加载到#div1元素中，还不如在其中创建一个新的div（通过.append()或.appendTo()追加）并加载到其中。
在那之后（至少在重新加载操作中），删除先前的内容，以便新内容爬到顶部位置（而不改变滚动位置）。

示例：（未经测试）

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

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

2 个答案: