用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

檢查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);

Answer 2

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

但我不建議您這樣做，因為保存和恢復滾動位置在每次重新加載內容時都無法避免輕微的閃爍效果。

因此，相反，我建議您更新實際更改的項目，而不是重新加載整個內容，這樣scrollTop屬性就永遠不會更改。

當然，（以正確的方式進行操作）這意味着修改您的shownic8.php頁面（或改為實施其他不同的路由）以返回一些結構化數據，並使用它們來填充或更新div內容。

另一方面，您可以嘗試使用另一種稍微骯臟的方法來隱藏閃爍的效果（由不太明顯的副作用代替）。 那是：

1. 與其直接將內容加載到#div1元素中， .appendTo()在其中創建一個新的div（通過.append()或.appendTo()追加）並加載到其中。

2. 之后（至少在重新加載操作中），刪除以前的內容，以便新內容爬到頂部位置（並且不更改滾動位置）。

示例：（未測試）

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