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

问题描述

问 题

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

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

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

解决方案

// 发送
$(".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 div=$(".conversations");
    $("#J-title").val("");
    //toLocaleString()转换
    if(!$send){ //消息为空时就发
        $(".conversations").append(["<div class=\"im-msg im-msg-notice\">",
            "<i class=\"im-icon-notice\"></i><p>消息不能为空</p>",
            "</div>"].join(""));
    }else{
        $(".conversations").append(["<div class=\"me-list clearfix\">",
            "                    <div class=\"me-avatar\">",
            "                        <img src=\"../img/xz-details/me-avatar-big.png\" class=\"me-avatar\" alt=\"\">",
            "                    </div>",
            "                    <div 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>",
            "                    </div>",
            "                </div>"].join(""));
    }
    div.scrollTop (div[0].scrollHeight);//你需要把内容插入dom之后，再执行滚动条位置移动，此时才能生效
});

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

这篇关于javascript - jquery当上面的聊天内容变成滚动条自动保持在最底部 离滚动条最底部还差2行，这是为什么?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！