Javascript 滚动条应在bootom处，不带setInterval（）

每次用户发送或接收新消息时，我希望保留滚动条

<script>
$ = jQuery;
var currentID = null;
var chatTimer = null;
var scrolled;

function fetch_data() {
  $.ajax({
    url: "select.php",
    method: "POST",
    success: function(data) {
      $('#live_data').html(data);
     }
  });
}

function fetch_chat() {

  $.ajax({
    url: "fetch_chat.php",
    method: "POST",
    data: {
      id: currentID
    },
    dataType: "text",
    success: function(data) {
      $("#chatbox").show();
      $('#messages').html(data);
      $("div.area").show();
      if(!scrolled){
      $('#messages').scrollTop($('#messages')[0].scrollHeight);
      scrolled=true;
      }
    }

  });

}

$(document).ready(function() {

 fetch_data();

  $(document).on('click', '.first_name', function() {
      scrolled=false;
    currentID = $(this).data("id1");
    fetch_chat();
});



  $("#sub").click(function() {

    var text = $("#text").val();
    $.post('insert_chat.php', {
      id: currentID,
      msg: text
    }, function(data) {
      $("#messages").append(data);
      $("#text").val('');
      scrolled=false;
      setInterval(function() {
    fetch_chat();}, 500);
    });
  });

});
</script>

$=jQuery；
var currentID=null；
var chatTimer=null；
var滚动；
函数fetch_data（）{
$.ajax({
url:“select.php”，
方法：“张贴”，
成功：功能（数据）{
$（'live#u data'）.html（数据）；
}
});
}
函数fetch_chat（）{
$.ajax({
url:“fetch_chat.php”，
方法：“张贴”，
数据：{
id:currentID
},
数据类型：“文本”，
成功：功能（数据）{
$（“#聊天室”）.show（）；
$（'#messages'）.html（数据）；
$（“分区面积”）.show（）；
如果（！滚动）{
$（“#消息”）.scrollTop（$（“#消息”）[0]。scrollHeight）；
滚动=真；
}
}
});
}
$（文档）.ready（函数（）{
获取_数据（）；
$（文档）.on（'click'，'first_name'，function（）{
滚动=假；
currentID=$（this）.data（“id1”）；
fetch_chat（）；
});
$（“#子”）。单击（函数（）{
var text=$（“#text”）.val（）；
$.post（'insert_chat.php'{
id:currentID，
msg:text
}，函数（数据）{
$（“#消息”）。追加（数据）；
$（“#文本”）.val（“”）；
滚动=假；
setInterval（函数（）{
fetch_chat（）；}，500）；
});
});
});

我想要的是，无论何时用户发送或接收新消息，滚动条都应该位于底部，但它应该可以根据用户的意愿滚动。每当滚动条向上滚动时，setinterval（）将滚动条向下移动。

---

我想反复调用fetch_chat（），但不是滚动条，我希望它位于底部：在开始时，在发送或接收新消息后，必须可以自由滚动

以下答案的基本逻辑：

---

比较当前聊天室HTML和以前的聊天室HTML，如果它们不同，则滚动，如果它们相同，则不滚动

$=jQuery；
var currentID=null，
chatTimer=null，
oldHtml=“”；
函数fetch_data（）{
$.ajax({
url:“select.php”，
方法：“张贴”，
成功：功能（数据）{
$（'live#u data'）.html（数据）；
}
});
}
函数fetch_chat（）{
$.ajax({
url:“fetch_chat.php”，
方法：“张贴”，
数据：{
id:currentID
},
数据类型：“文本”，
成功：功能（数据）{
$（“#聊天室”）.show（）；
$（'#messages'）.html（数据）；
$（“分区面积”）.show（）；
if（oldHtml！==数据）{
$（“#消息”）.scrollTop（$（“#消息”）[0]。scrollHeight）；
}
oldHtml=数据；
}
});
}
$（文档）.ready（函数（）{
获取_数据（）；
$（文档）.on（'click'，'first_name'，function（）{
currentID=$（this）.data（“id1”）；
fetch_chat（）；
});
$（“#子”）。单击（函数（）{
var text=$（“#text”）.val（）；
$.post（'insert_chat.php'{
id:currentID，
msg:text
}，函数（数据）{
$（“#消息”）。追加（数据）；
$（“#文本”）.val（“”）；
setInterval（fetch_chat，500）；
});
});
});

将当前聊天室HTML与以前的聊天室HTML进行比较，如果不同，则滚动，如果相同，则不进行比较。如何比较？？？添加了我的答案。如果您可以标记为解决方案/投票（如果是解决方案），谢谢。

<script>
$ = jQuery;
var currentID = null,
    chatTimer = null,
    oldHtml = "";

function fetch_data() {
  $.ajax({
    url: "select.php",
    method: "POST",
    success: function(data) {
      $('#live_data').html(data);
     }
  });
}

function fetch_chat() {

  $.ajax({
    url: "fetch_chat.php",
    method: "POST",
    data: {
      id: currentID
    },
    dataType: "text",
    success: function(data) {
      $("#chatbox").show();
      $('#messages').html(data);
      $("div.area").show();
      if (oldHtml !== data) {
        $('#messages').scrollTop($('#messages')[0].scrollHeight);
      }
      oldHtml = data;
    }

  });

}

$(document).ready(function() {

 fetch_data();

  $(document).on('click', '.first_name', function() {
    currentID = $(this).data("id1");
    fetch_chat();
});



  $("#sub").click(function() {

    var text = $("#text").val();
    $.post('insert_chat.php', {
      id: currentID,
      msg: text
    }, function(data) {
      $("#messages").append(data);
      $("#text").val('');
      setInterval(fetch_chat, 500);
    });
  });

});
</script>