开发者社区> 问答> 正文

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

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

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

展开
收起
a123456678 2016-03-13 18:28:50 2863 0
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 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的位置就可以达到你要的效果了

    2019-07-17 19:02:59
    赞同 展开评论 打赏
问答分类:
问答地址:
相关产品:
问答排行榜
最热
最新

相关课程

更多

相关电子书

更多
低代码开发师(初级)实战教程 立即下载
冬季实战营第三期:MySQL数据库进阶实战 立即下载
阿里巴巴DevOps 最佳实践手册 立即下载