Сохраняйте положение прокрутки внутри div после перезагрузки php файла с помощью ajax

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>

Вот код из файла "saidic8.php"

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

Можете ли вы помочь мне сохранить положение моей полосы прокрутки? Большое спасибо.

Answer 1

Вы можете использовать либо свойство scrollTop элемента DOM, либо функцию 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);