Ajax请求后自动滚动到DIV的底部

在人们开始标记为重复之前，这里的工作中没有一个答案！

轮询函数是一个PHP文件，只需获取文本文件的内容，我希望浏览器一旦请求（每3秒发射一次）滚动到DIV内容的底部。这是一些代码

  <div id="content_div_id">
 </div>
<script>
$(function() {
  startRefresh();    
    });
    function startRefresh() {
        setTimeout(startRefresh,3000);
        $.post('pollchat.php', function(data) {
            $('#content_div_id').html(data);
        });
    }

我的问题是在3秒刷新之后，它再次位于聊天内容的顶部。。。。

整个东西都嵌套在这样的窗口中：

<div class="portlet-body chat-widget" style="overflow-y: auto; width: auto; height: 300px;">
                            <div class="row">
                                <div class="col-lg-12">
                                    <p class="text-center text-muted small">January 1, 2014 at 12:23 PM</p>
                                </div>
                            </div>
                            <div id="content_div_id">
                            </div>
                        </div>

重点是：您的div with ID =" content_div_id"不可滚动。

我使用不同的值创建了一个模拟片段：

添加样式="溢出Y：隐藏；宽度：自动；高度：自动；"用ID =" content_div_id"
我使用jquery.get而不是jquery.post（您需要在代码中使用帖子）
我使用了其他URL（您需要使用URL）
我将计时器移动到Ajax中，以便一次又一次地开始（您可以使用定居者，但是如果这样做，您需要计划如何以及何时停止它）
我使用jQuery附加而不是jQuery HTML，因为我认为您想附加而不是替代。取决于您需要哪一个。

var i = 0;
function startRefresh() {
  $.get('https://api.github.com/users', function(data) {
    $('#content_div_id').append(i + ': ' + data[0].id + '<br>');
    i += 1;
    var myDiv = $('div.portlet-body.chat-widget');
    myDiv.scrollTop(myDiv[0].scrollHeight - myDiv[0].clientHeight);
    setTimeout(startRefresh, 300);
  });
}
$(function () {
  startRefresh();
});

#content_div_id {
  width: 50%;
  height: 100px;
  overflow-y: scroll;
}

<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<div class="portlet-body chat-widget" style="overflow-y: auto; width: auto; height: 300px;">
    <div class="row">
        <div class="col-lg-12">
            <p class="text-center text-muted small">January 1, 2014 at 12:23 PM</p>
        </div>
    </div>
    <div id="content_div_id" style="overflow-y: hidden; width: auto; height: auto;">
    </div>
</div>

尝试以下：
window.scrollTo(0,document.getElementById('content_div_id').scrollHeight);

除了我建议使用setInterval而不是setTimeout的建议外，这是您需要使用的代码滚动到div的bottom。

$(function() {
  setInterval(function() {
    startRefresh();
  }, 3000)
});
function startRefresh() {
  $.post('pollchat.php', function(data) {
    $('#content_div_id').html(data);
    $('#content_div_id').scrollTop($('#content_div_id')[0].scrollHeight);//scrolls to bottom of div #content_div_id
  });
}

看一下片段。它有您想要的。

$(function() {
  
  startRefresh();    
    });
    function startRefresh() {
        setTimeout(startRefresh,3000);
   // put this in your ajax $.Post callback Like below
   // $.post('pollchat.php', function(data) {
     //   $('#content_div_id').html(data);
     //     var wtf    = $('#content_div_id');
     //     var height = wtf[0].scrollHeight;
      //    wtf.scrollTop(height);
   // });
       var wtf    = $('#content_div_id');
  var height = wtf[0].scrollHeight;
  wtf.scrollTop(height);
    }

#content_div_id{
width:100%;
  height:300px;
  overflow-y:scroll;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="content_div_id">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
  Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
  Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
  Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
  Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
 </div>

相关内容

最新更新

热门标签：