Question

我创建了一个聊天框，它首先滚动到底部，滚动条保持不变，直到用户向上滚动。但是插入一个新文本而不是滚动条向下移动它保持在同一位置。

<script>
var currentID = null;
var chatTimer = null;
var scrolled=false;
function fetch_data() {
  $.ajax({
    url: "select.php",
    method: "POST",
    success: function(data) {
      $('#live_data').html(data);
      //fetch_chat();
    }
  });
}

function fetch_chat() {
  $.ajax({
    url: "fetch_chat.php",
    method: "POST",
    data: {
      id: currentID
    },
    dataType: "text",
    success: function(data) {
      $("#messages").show();
      $('#messages').html(data);
      $("div.area").show();
      //chatTimer = setTimeout(fetch_chat, 500); //request the chat again in 2 seconds time
        if(!scrolled){
        $("#messages").animate({ scrollTop: $(document).height() }, "fast");
    }

    }

  });

}

$(document).ready(function() {
        $("#messages").on('scroll',function(){
        scrolled=true;
    });
 fetch_data();

  $(document).on('click', '.first_name', function() {
    currentID = $(this).data("id1");
    //immediately fetch chat for the new ID, and clear any waiting fetch timer that might be pending
    //clearTimeout(chatTimer);
    fetch_chat(); 
  });

  function scrollToBottom() {
    $("#messages").scrollTop(1e10); // Lazy hack
}

setInterval(function() {
    fetch_chat();
}, 500);

  $("#sub").click(function() {
    var text = $("#text").val();

    $.post('insert_chat.php', {
      id: currentID,
      msg: text
    }, function(data) {
      $("#messages").append(data);
      $("#text").val('');
      scrollToBottom();
    });
  //  alert(text);
  });

  //this will also trigger the first fetch_chat once it completes
});
</script>

我只想在用户输入新文本后将滚动保持在底部。滚动应始终保持在底部，但在用户希望时可滚动。

Answer 1

首先使用像这样的jQuery读取当前聊天框的高度，

var scrollToheight = $("#message").height();

然后使用此高度scrollTop jQuery函数：

 $("#message").scrollTop(scrollToheight);

这应该永远适合你。

保持滚动到底部并附加文本

1 个答案: