ajax加载后的jQuery DIV AutoScroll

jQuery DIV AutoScroll after ajax load

本文关键字：DIV AutoScroll jQuery 加载 ajax      更新时间：2023-09-26

我在网页上有一个简单的聊天应用程序，当滚动条位于底部时，我尝试自动滚动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的内容而不是append时，问题就来了

$("#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不会自动滚动新消息。

感谢您的帮助

最终我实现了我的目标：

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"));
        }
    }

我定义了一个名为scrolled的var，并将其设置为false（用户没有滚动div），之后我在div#行加载对话，然后自动滚动到该div的底部以显示最后的消息，在滚动事件中添加一个监听器，以防用户滚动div，然后我将scrolled设置为true，这样div就不会自动滚动。

每秒刷新div元素，并检查当前滚动位置是否等于div的高度，如果是，则将scrolled设置为false。

之后，如果滚动的var为false，我运行一个名为updateScroll的函数滚动到底部。

相关文章：