ajax加載后的jQuery DIV AutoScroll

Question

我在網頁上有一個簡單的聊天應用程序，僅在滾動條位於底部時才嘗試自動滾動div時出現問題。

我已經試過了：

$("#line").load("x.php");
   var d = $('#line');
   d.scrollTop(d.prop("scrollHeight"));
   var refreshId = setInterval(function(){
      var isEnd = $('#line')[0].offsetHeight + $('#line')[0].scrollTop == $('#line')[0].scrollHeight;
      $('#line').append('<p class="triangle-isosceles right"><img src="images/user-img.jpg" style="height: 30px;padding-right: 5px;"/><b>Douglas:</b> prueba<br><small>Fecha</small></p>');
      console.log(isEnd);
      if(isEnd){
       var scrolle = $("#line").prop("scrollHeight") - $('#line').height();
       $("div#line").scrollTop(scrolle)  ;
      }
    }, 1000);

因此，當使用append函數很好地執行此操作時，就會出現問題，而不是使用load()刷新div的內容而不是添加

$("#line").load("x.php");
   var d = $('#line');
   d.scrollTop(d.prop("scrollHeight"));
   var refreshId = setInterval(function(){
      var isEnd = $('#line')[0].offsetHeight + $('#line')[0].scrollTop == $('#line')[0].scrollHeight;
      $("#line").load('ajax/x.php');
      console.log(isEnd);
      if(isEnd){
       var scrolle = $("#line").prop("scrollHeight") - $('#line').height();
       $("div#line").scrollTop(scrolle)  ;
      }
    }, 1000);

這似乎破壞了自動滾動，因為div不會自動滾動新消息。

感謝您的幫助

Answer 1

最終，我做到了這一點：

var scrolled = false;
    $(window).load(function() {
       $("#line").load("x.php");
       var d = $('#line');
       d.scrollTop(d.prop("scrollHeight"));
       $("#line").on('scroll', function(){
            scrolled=true;
        });
       var refreshId = setInterval(function(){     
            $("#line").load('x.php');
          if($('#line')[0].offsetHeight + $('#line')[0].scrollTop == $('#linea')[0].scrollHeight){
              scrolled=false;
          }

          updateScroll();
        }, 1000);
    });

    function updateScroll(){
        if(!scrolled){
            $("#linea").scrollTop($("#linea").prop("scrollHeight"));
        }
    }

我定義了一個名為scroll的var，並將其設置為false（用戶沒有滾動div），之后，我在div #line上加載了對話，然后自動滾動到該div的底部以顯示最后一條消息，並添加一個滾動事件的偵聽器，如果用戶滾動div，則我將scroll設置為true，因此div不會自動滾動。

每秒刷新div元素，並檢查當前滾動位置是否等於div的高度，如果是，則將滾動設置為false。

之后，如果滾動的var為false，我將運行一個名為updateScroll的函數以滾動到底部。