在聊天应用中自动滚动

时间：2016-10-05 07:12:28

标签： javascript jquery

我创建了一个实时聊天，但是当有新消息时我无法自动向下滚动。

我的Div如下：

<div id = "serverChat" style="overflow:scroll; height:400px;"></div>

我尝试使用这样的jquery：

var $chat = $('#serverChat');`
$chat.animate({scrollTop: $chat.get(0).scrollHeight}, 2000);

我不太确定如何让它发挥作用。

谢谢！

2 个答案:

答案 0 :(得分：1)

您可以像这样获取scrollHeight：

document.getElementById('id').scrollHeight

之后只需将其传递给动画即可。

示例： 

$(document).on('click', '#clickme', function(){
	var sh = document.getElementById('serverChat').scrollHeight;
	$("#serverChat").animate({ scrollTop: sh }, 600);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>

<div id="serverChat" style="overflow:scroll; height:200px;">
	s<br>
	s<br>
	s<br>
	s<br>
	s<br>
	s<br>
	s<br>
	s<br>
	s<br>
	s<br>
	s<br>
	s<br>
  s<br>
	s<br>
  s<br>
	s<br>
  s<br>
	s<br>
</div>
<button id="clickme">Click me</button>

答案 1 :(得分：0)

滚动到块结尾的方法：

function scrollToEnd(block, duration) {
    // if block not passed scroll to end of page
    block = block || $("html, body");
    duration = duration || 2000;

    // you can pass also block's jQuery selector instead of jQuery object
    if(typeof block === 'string') {
        block = $(block);
    }

    // if exists at list one block
    if (block.length) {
        block.animate({
            scrollTop: block.get(0).scrollHeight
        }, duration);
    }
}

您需要在将新消息添加到聊天块后调用此方法：

scrollToEnd('#serverChat');

您也可以使用此方法向下滚动任何其他块或整页。

<强> jsFiddle

＆＃13;
＆＃13; 
function scrollToEnd(block, duration) {
		// if block not passed scroll to end of page
		block = block || $("html, body");
    duration = duration || 2000;
    
    // you can pass also block's jQuery selector instead of jQuery object
		if(typeof block === 'string') {
        block = $(block);
    }
    // if exists at list one block
    if (block.length) {
      block.animate({
          scrollTop: block.get(0).scrollHeight
      }, duration);
    }
}


scrollToEnd('#serverChat');
scrollToEnd('#otherBlock', 5000);
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id = "serverChat" style="overflow:scroll; height:400px;">
<p>Message</p>
<p style="float:right;">Answer</p>
<p>Message</p>
<p style="float:right;">Answer</p>
<p>Message</p>
<p style="float:right;">Answer</p>
<p>Message</p>
<p style="float:right;">Answer</p>
<p>Message</p>
<p style="float:right;">Answer</p>
<p>Message</p>
<p style="float:right;">Answer</p>
<p>Message</p>
<p style="float:right;">Answer</p>
<p>Message</p>
<p style="float:right;">Answer</p>
<p>Message</p>
<p style="float:right;">Answer</p>
<p>Message</p>
<p style="float:right;">Answer</p>
<p>Message</p>
<p style="float:right;">Answer</p>
<p>Message</p>
<p style="float:right;">Answer</p>
<p>Message</p>
<p style="float:right;">Answer</p>
<p>Message</p>
<p style="float:right;">Answer</p>
<p>Message</p>
<p style="float:right;">Answer</p>
<p>Message</p>
<p style="float:right;">Answer</p>
<p>Message</p>
<p style="float:right;">Answer</p>
<p>Message</p>
<p style="float:right;">Answer</p>
<p>Message</p>
<p style="float:right;">Answer</p>
<p>Message</p>
<p style="float:right;">Answer</p>
<p>Message</p>
<p style="float:right;">Answer</p>
<p>Message</p>
<p style="float:right;">Answer</p>
<p>Message</p>
<p style="float:right;">Answer</p>
<p>Message</p>
<p style="float:right;">Answer</p>
<p>Message</p>
<p style="float:right;">Answer</p>
<p>Message</p>
<p style="float:right;">Answer</p>
<p>Message</p>
<p style="float:right;">Answer</p>
<p>Message</p>
<p style="float:right;">Answer</p>
<p>Message</p>
<p style="float:right;">Answer</p>
<p>Message</p>
<p style="float:right;">Answer</p>
<p>Message</p>
<p style="float:right;">Answer</p>
<p>Message</p>
<p style="float:right;">Answer</p>
<p>Message</p>
<p style="float:right;">Answer</p>
<p>Message</p>
<p style="float:right;">Answer</p>
<p>Message</p>
<p style="float:right;">Answer</p>
<p>Message</p>
<p style="float:right;">Answer</p>
<p>Message</p>
<p style="float:right;">Answer</p>
<p>Message</p>
<p style="float:right;">Answer</p>
<p>Message</p>
<p style="float:right;">Answer</p>
<p>Message</p>
<p style="float:right;">Answer</p>
<p>Message</p>
<p style="float:right;">Answer</p>
<p>Message</p>
<p style="float:right;">Answer</p>
<p>Message</p>
<p style="float:right;">Answer</p>
<p>Message</p>
<p style="float:right;">Answer</p>
<p>Message</p>
<p style="float:right;">Answer</p>
<p>Message</p>
<p style="float:right;">Answer</p>
<p>Message</p>
<p style="float:right;">Answer</p>
<p>Message</p>
<p style="float:right;">Answer</p>
<p>Message</p>
<p style="float:right;">Answer</p>
<p>Message</p>
<p style="float:right;">Answer</p>
<p>Message</p>
<p style="float:right;">Answer</p>
<p>Message</p>
<p style="float:right;">Answer</p>
<p>Message</p>
<p style="float:right;">Answer</p>
<p>Message</p>
<p style="float:right;">Answer</p>
<p>Message</p>
<p style="float:right;">Answer</p>
<p>Message</p>
<p style="float:right;">Answer</p>
<p>Message</p>
<p style="float:right;">Answer</p>
<p>Message</p>
<p style="float:right;">Answer</p>
<p>Message</p>
<p style="float:right;">Answer</p>
<p>Message</p>
<p style="float:right;">Answer</p>
<p>Message</p>
<p style="float:right;">Answer</p>
<p>Message</p>
<p style="float:right;">Answer</p>
<p>Message</p>
<p style="float:right;">Answer</p>
<p>Message</p>
<p style="float:right;">Answer</p>
<p>Message</p>
<p style="float:right;">Answer</p>
<p>Message</p>
<p style="float:right;">Answer</p>
<p>Message</p>
<p style="float:right;">Answer</p>
<p>Message</p>
<p style="float:right;">Answer</p>
<p>Message</p>
<p style="float:right;">Answer</p>
<p>Message</p>
<p style="float:right;">Answer</p>
<p>Message</p>
<p style="float:right;">Answer</p>
<p>Message</p>
<p style="float:right;">Answer</p>
<p>Message</p>
<p style="float:right;">Answer</p>
<p>Message</p>
<p style="float:right;">Answer</p>
<p>Message</p>
<p style="float:right;">Answer</p>
<p>Message</p>
<p style="float:right;">Answer</p>
<p>Message</p>
<p style="float:right;">Answer</p>
<p>Message</p>
<p style="float:right;">Answer</p>
<p>Message</p>
<p style="float:right;">Answer</p>
<p>Message</p>
<p style="float:right;">Answer</p>
<p>Message</p>
<p style="float:right;">Answer</p>
<p>Message</p>
<p style="float:right;">Answer</p>
<p>Message</p>
<p style="float:right;">Answer</p>
<p>Message</p>
<p style="float:right;">Answer</p>
<p>Message</p>
<p style="float:right;">Answer</p>
<p>Message</p>
<p style="float:right;">Answer</p>
<p>Message</p>
<p style="float:right;">Answer</p>
<p>Message</p>
<p style="float:right;">Answer</p>
<p>Message</p>
<p style="float:right;">Answer</p>
<p>Message</p>
<p style="float:right;">Answer</p>
<p>Message</p>
<p style="float:right;">Answer</p>
<p>Message</p>
<p style="float:right;">Answer</p>
<p>Message</p>
<p style="float:right;">Answer</p>
<p>Message</p>
<p style="float:right;">Answer</p>
<p>Message</p>
<p style="float:right;">Answer</p>
<p>Message</p>
<p style="float:right;">Answer</p>
<p>Message</p>
<p style="float:right;">Answer</p>
<p>Message</p>
<p style="float:right;">Answer</p>
<p>Message</p>
<p style="float:right;">Answer</p>
<p>Message</p>
<p style="float:right;">Answer</p>
<p>Message</p>
<p style="float:right;">Answer</p>
<p>Message</p>
<p style="float:right;">Answer</p>
<p>Message</p>
<p style="float:right;">Answer</p>
<p>Message</p>
<p style="float:right;">Answer</p>
<p>Message</p>
<p style="float:right;">Answer</p>
<p>Message</p>
<p style="float:right;">Answer</p>
<p>Message</p>
<p style="float:right;">Answer</p>
<p>Message</p>
<p style="float:right;">Answer</p>
<p>Message</p>
<p style="float:right;">Answer</p>
<p>Message</p>
<p style="float:right;">Answer</p>
<p>Message</p>
<p style="float:right;">Answer</p>
<p>Message</p>
<p style="float:right;">Answer</p>

</div>

<div id = "otherBlock" style="overflow:scroll; height:200px;">
<p>some text</p>
<p>some text</p>
<p>some text</p>
<p>some text</p>
<p>some text</p>
<p>some text</p>
<p>some text</p>
<p>some text</p>
<p>some text</p>
<p>some text</p>
<p>some text</p>
<p>some text</p>
<p>some text</p>
<p>some text</p>
<p>some text</p>
<p>some text</p>
<p>some text</p>
<p>some text</p>
<p>some text</p>
<p>some text</p>
<p>some text</p>
<p>some text</p>
<p>some text</p>
<p>some text</p>
<p>some text</p>
<p>some text</p>
<p>some text</p>
<p>some text</p>
<p>some text</p>
<p>some text</p>
<p>some text</p>
<p>some text</p>
<p>some text</p>
<p>some text</p>
<p>some text</p>
<p>some text</p>
<p>some text</p>
<p>some text</p>
<p>some text</p>
<p>some text</p>
<p>some text</p>
<p>some text</p>
<p>some text</p>
<p>some text</p>
<p>some text</p>
<p>some text</p>
<p>some text</p>
<p>some text</p>
<p>some text</p>
<p>some text</p>
<p>some text</p>
<p>some text</p>
<p>some text</p>
<p>some text</p>
<p>some text</p>
<p>some text</p>
<p>some text</p>
<p>some text</p>
<p>some text</p>
<p>some text</p>
<p>some text</p>
<p>some text</p>
<p>some text</p>
<p>some text</p>
<p>some text</p>
<p>some text</p>
<p>some text</p>
<p>some text</p>
<p>some text</p>
<p>some text</p>
<p>some text</p>
<p>some text</p>
<p>some text</p>
<p>some text</p>
<p>some text</p>
<p>some text</p>
<p>some text</p>
<p>some text</p>
<p>some text</p>
<p>some text</p>
<p>some text</p>
<p>some text</p>
<p>some text</p>
<p>some text</p>
<p>some text</p>
<p>some text</p>
<p>some text</p>
<p>some text</p>
<p>some text</p>
<p>some text</p>
<p>some text</p>
<p>some text</p>
<p>some text</p>
<p>some text</p>
<p>some text</p>
<p>some text</p>
<p>some text</p>
<p>some text</p>
<p>some text</p>
<p>some text</p>
<p>some text</p>
<p>some text</p>
<p>some text</p>
<p>some text</p>
<p>some text</p>
<p>some text</p>
<p>some text</p>
<p>some text</p>
<p>some text</p>
<p>some text</p>
<p>some text</p>
<p>some text</p>

</div>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题