Прокрутка до нижней части div при каждом обновлении - PullRequest
Новая
       18

Прокрутка до нижней части div при каждом обновлении

1 голос
/ 12 декабря 2011

В настоящее время у меня есть div, который обновляется каждые 8 ​​секунд. Этот div в основном загружает страницу php. Тем не менее, я столкнулся с проблемой прокрутки в нижней части этой страницы. Это код для обновления и прокрутки к нижней части div: 

 <script>
    var refreshId = setInterval(function()
    {            
         $('#responsecontainer').fadeOut("slow").load('forum.php').fadeIn("slow");

         $('#chat').attr({ scrollTop: $('#chat').attr("scrollHeight") });
    }, 8000);

    </script>

Код контейнера div выглядит следующим образом: 

<div style="width: 100%; height: 300px; overflow: scroll; border: 5px ; background-color:#ccc ;" id="responsecontainer" name="chat">

            Loading..

 </div>

Пожалуйста, посоветуйте, как я могу перейти к нижней части div, когда он обновляется. Спасибо

1 Ответ

1 голос
/ 12 декабря 2011

Сценарий должен вызываться при загрузке документа.Затем использование анимации fadeOut и fadeIn произойдет после загрузки, поэтому она сбрасывает позицию прокрутки.Сценарий ниже будет работать, но в конечном итоге без этих анимаций.

Метод загрузки является вызовом XHR и возвращает статус ответа, используя который мы можем контролировать отображаемые данные. 

$(document).ready(function() {
var refreshId = setInterval(function() {            
    $('#responsecontainer').load('forum.php', function(response, status, xhr) {
        if (status == "error") {
            var msg = "Sorry but there was an error: ";
            $("#error").html(msg + xhr.status + " " + xhr.statusText);
        }
        else{
            $('#responsecontainer').scrollTop($('#responsecontainer').height());        
        }
    });
}, 8000);
});
...