javascript - jquery当上面的聊天内容变成滚动条自动保持在最底部 离滚动条最底部还差2行，这是为什么?

Question

http://jsbin.com/hukehureme/edit?html,css,js,console 请各位大神帮我看看下。

这里的滚动条还没到最底部呢，我好奇怪。
怎么找不到原因。

    p.scrollTop (p[0].scrollHeight);//当上面的聊天内容变成滚动条自动保持在最底部  离滚动条最底部还差2行，这是为什么?

Answer 1

// 发送
$(".send-btn").click(function(){
    var $send=$("#J-title").val(); //textarea获得内容
    var $color=$("#J-title").css("color");
    var $font=$("#J-title").css("fontFamily");
    var $size=$("#J-title").css("fontSize");
    var curTime = new Date(); //创建时间点
    var p=$(".conversations");
    $("#J-title").val("");
    //toLocaleString()转换
    if(!$send){ //消息为空时就发
        $(".conversations").append(["<p class=\"im-msg im-msg-notice\">",
            "<i class=\"im-icon-notice\"></i><p>消息不能为空</p>",
            "</p>"].join(""));
    }else{
        $(".conversations").append(["<p class=\"me-list clearfix\">",
            "                    <p class=\"me-avatar\">",
            "                        <img src=\"../img/xz-details/me-avatar-big.png\" class=\"me-avatar\" alt=\"\">",
            "                    </p>",
            "                    <p class=\"me-msg\">",
            "                        <span class=\"me-control\">",
            "                            <em class=\"me-label clearfix\">",
            "                                <i class=\"me-time\">"+curTime.toLocaleString()+"</i>",
            "                                <i class=\"me-name\">我就是用户名啊</i>",
            "                            </em>",
            "                            <span class=\"words\"><a href=\"\" style=\"color:"+$color+";font-family:"+$font+"; font-size:"+$size+";\">"+$send+"</a></span>",
            "                        </span>",
            "                    </p>",
            "                </p>"].join(""));
    }
    p.scrollTop (p[0].scrollHeight);//你需要把内容插入dom之后，再执行滚动条位置移动，此时才能生效
});

修改一下js的位置就可以达到你要的效果了

Answer 2

p.scrollTop (document.height);这样一定到底了啊~

Answer 3

新发送的内容所占高度没有算在scrollHeight里面