прокрутить div вниз на конкретное событие

Question

У меня есть простое приложение чата, использующее Ajax и HTML.Всякий раз, когда я загружаю новые сообщения, я хочу прокрутить div, чтобы показать самое последнее сообщение, поэтому я делаю следующее:

jQuery:

function SendMessage()
{
    var clientmsg = $("#comment").val();
    var email = $("#email").val();
    event.preventDefault();
    if (clientmsg != '')
    {
        $.ajax(
        {
            type: 'POST',
            url: url,
            data:
            {
                email: email,
                message: clientmsg
            },
            success: function (data)
            {

                // Success means the message was saved
                // Call the function that updates the div with the new messages
                UpdateChat();


                $("#conversation").scrollTop($("#conversation").outerHeight() * 1000);
            }
        });
    }
}

Я использую эту строку для прокруткиdiv до максимума:

$("#conversation").scrollTop($("#conversation").outerHeight()*1000);

Моя проблема в том, что он прокручивается до максимума БЕЗ отображения новых сообщений .Он прокручивается до последнего сообщения перед новым .Что странно, потому что я звоню после обновления чата.Вот функция, которая обновляет чат:

function UpdateChat(){
    $.ajax({
              // URL that gives a JSON of all new messages:
            url: "url",
            success: function(result)
            {
              var objects = JSON.parse(result);
              $("#conversation").html("");
              objects.forEach(function(key, index){
               //append the messages to the div
                $("#conversation").append("html here");
              });
            }
      });
  };

Answer 1

Как уже упоминалось в комментариях, вы можете использовать setTimeout(), чтобы позволить обновлению DOM некоторое время перед прокруткой.Смотрите код ниже:

function SendMessage()
{
    var clientmsg = $("#comment").val();
    var email = $("#email").val();
    event.preventDefault();
    if (clientmsg != '')
    {
        $.ajax(
        {
            type: 'POST',
            url: url,
            data:
            {
                email: email,
                message: clientmsg
            },
            success: function (data)
            {
            // Success means the message was saved
            // Call the function that updates the div with the new messages
            UpdateChat();

            setTimeout(function() {
                $("#conversation").scrollTop($("#conversation").outerHeight() * 1000);
            }, 500);
        }
    });
}
}

Answer 2

Предполагая, что вы вставляете новый элемент внизу, вы можете использовать scrollIntoView, чтобы убедиться, что новый элемент видим:

$.ajax({
    // ...
    success: function(data) {
        var lastElement = $('#conversation :last-child');
        lastElement[0].scrollIntoView();
    }
});

Answer 3

Попробуйте поместить строку прокрутки в метод setTimeout(), чтобы около 500ms обновлялось перед прокруткой вниз.

jQuery:

function SendMessage(){
      var clientmsg = $("#comment").val();
      var email = $("#email").val();
      event.preventDefault();
      if (clientmsg != '') {
          $.ajax({
              type: 'POST',
              url: url,
              data: {
                  email:  email,
                  message: clientmsg
              },
              success: function (data) {

              // Success means the message was saved
              // Call the function that updates the div with the new messages
                UpdateChat();

                setTimeout(performScroll, 500);

              }
          });
    }
}

и функция прокрутки

function performScroll() {  
  $("#conversation").scrollTop($("#conversation").outerHeight()*1000);
}