ajax请求后自动滚动到div的底部

Question

在人们开始标记为重复之前，没有任何答案在工作！

poll函数是一个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> 

Answer 1

问题是：您的div与id =“content_div_id”不可滚动。

我创建一个模拟片断，采用不同的值：

• 添加风格= “溢出-Y：隐藏;宽度：汽车;高度：汽车;”使用id =“content_div_id”
• 我用来代替jQuery.post jQuery.get到div的（你需要使用后在代码）
• 我用一个不同的URL（您需要使用您的网址）
• 我把计时器移到了ajax中，以便它一次又一次地启动。 （你可以使用settimer，但是如果你这样做，你需要计划如何以及何时停止它）
• 我用jQuery append代替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>

Answer 2

试试这个：
window.scrollTo(0,document.getElementById('content_div_id').scrollHeight);

Answer 3

除了我使用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 
    }); 
} 

Answer 4

看一看片段。它有你想要的。

$(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>