Question

时遇到问题然后它开始向上滚动！

那里我做错了什么？感谢。

我希望始终保持向下滚动。

  $chat        = $('#chatarea');
  $submit       = $('#submit');
  $input = $('#text')
  ENTER        = 13;


var addMessage = function(message) {

// create message element
$msg = $('<div>', {class: 'message hidden-message', text: message})
if($input.val().length > 0){
// append element
$chat.append($msg) ;
}
else
{
   return false;}
$msg.hide().removeClass('hidden-message') ;
$msg.slideDown(function(){
    // animate scroll to bottom
    $chat.animate({ scrollTop: $chat.height() })    
});

};
$input.on('keydown', function(e){
if(e.keyCode === 13 && $input.val().length < 1 ){
    return false;
}
});
$input.on('keyup', function(e){
if(e.keyCode == 13 && $input.val().length > 1 ) {addMessage($input.val());
$input.val('');
 }
else if(e.keyCode == 13 && $input.val().length == 1){
$input.val('');
   e.preventDefault();
   return false;}else{}
});
$submit.on('click', function(){
 if($input.val().length > 1) {
addMessage($input[0].value);
$input.val('');   
}
});

Answer 1

问题：

.holder的高度为1000px，其中.chatarea的高度为90%，因此在您的脚本中$chat.height()始终返回900，所以在60行左右，只要有输入，它就会滚动到900px并保持在那里。

<强>解决方案：

使用此：

$chat.animate({ scrollTop: $chat.prop("scrollHeight") - $chat.height() })

或更快的动画：

$chat.animate({ scrollTop: $chat.prop("scrollHeight") - $chat.height() }, 25)

而不是：

$chat.animate({ scrollTop: $chat.height() })

演示 http://jsfiddle.net/MYPgE/8/

Answer 2

问题在$ msg.slideDown函数内，只需注释掉$ chat.animate（{scrollTop：$ chat.height（）}）并将此代码放入$ submit.on点击功能

$(function () {
    $("#chatarea").animate({
    scrollTop: $('#chatarea').get(0).scrollHeight}, 1000);});
}

小提琴：http://jsfiddle.net/MYPgE/6/

页面在某些行之后向上滚动

2 个答案: