logo标签列表

聊天框，自动滚动到底部

javascriptjqueryhtmlcss
12

如何自动滚动聊天框

HTML：

<!DOCTYPE html>
<html lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">    
<meta name="robots" content="noindex">
<title>College Enquiry Chat</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="assets/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">

<script src="assets/js/jquery-1.10.2.min.js"></script>
    <script src="assets/js/bootstrap.min.js"></script>
    <script type="text/javascript">
        window.alert = function(){};
        var defaultCSS = document.getElementById('bootstrap-css');
        function changeCSS(css){
            if(css) $('head > link').filter(':first').replaceWith('<link rel="stylesheet" href="'+ css +'" type="text/css" />'); 
            else $('head > link').filter(':first').replaceWith(defaultCSS); 
        }
    </script>
</head>
<body>
            <div class="panel panel-primary" style="border:0px">
                <div class="panel-heading top-bar">
                    <div class="col-md-8 col-xs-8">
                        <h3 class="panel-title"><span class="glyphicon glyphicon-comment" style="margin-right:6px;"></span>College Enquiry Chat</h3>
                    </div>
                </div>


                <div class="panel-body msg_container_base">

                    <div class="row msg_container base_sent">
                        <div class="col-md-10 col-xs-10">
                            <div class="messages msg_sent">
                                <p>that mongodb thing looks good, huh?
                                tiny master db, and huge document store</p>
                            </div>
                        </div>
                    </div>

                    <div class="row msg_container base_receive">
                        <div class="col-md-10 col-xs-10">
                            <div class="messages msg_receive">
                                <p>that mongodb thing looks good, huh?
                                tiny master db, and huge document store</p>
                            </div>
                        </div>
                    </div>

                    <chat_log> . </chat_log>
                </div>

                <!--CHAT USER BOX-->
                <div class="panel-footer">
                    <div class="input-group" id="myForm">
                        <input id="btn-input" type="text" class="form-control input-sm chat_input" placeholder="Write your message here...">
                        <span class="input-group-btn">
                        <button class="btn btn-primary btn-sm" id="submit" type="submit">Send</button>
                        </span>
                    </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

JavaScript：

    <script>
$("#submit").click(function() {
    var data = $("#btn-input").val();
        //console.log(data);
        $('chat_log').append('<div class="row msg_container base_sent"><div class="col-md-10 col-xs-10"><div class="messages msg_receive"><p>'+data+'</p></div></div></div><div class="row msg_container base_receive"><div class="col-md-10 col-xs-10"><div class="messages msg_receive"><p>'+data+'</p></div></div></div>');
        clearInput();
});

function clearInput() {
    $("#myForm :input").each(function() {
        $(this).val(''); //hide form values
    });
}

$("#myForm").submit(function() {
    return false; //to prevent redirection to save.php
});
</script>

CSS：

.msg_container_base{
  background: #e5e5e5;
  margin: 0;
  padding: 0 10px 10px;
  max-height:80vh;
  overflow-x:hidden;
}
.top-bar {
  background: #666;
  color: white;
  padding: 10px;
  position: relative;
  overflow: hidden;
}
.msg_receive{
    padding-left:0;
    margin-left:0;
}
.msg_sent{
    padding-bottom:20px !important;
    margin-right:0;
}
.messages {
  background: white;
  padding: 10px;
  border-radius: 2px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
  max-width:100%;
}
.messages > p {
    font-size: 13px;
    margin: 0 0 0.2rem 0;
  }
.messages > time {
    font-size: 11px;
    color: #ccc;
}
.msg_container {
    padding: 10px;
    overflow: hidden;
    display: flex;
}
img {
    display: block;
    width: 100%;
}
.avatar {
    position: relative;
}
.base_receive > .avatar:after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 0;
    height: 0;
    border: 5px solid #FFF;
    border-left-color: rgba(0, 0, 0, 0);
    border-bottom-color: rgba(0, 0, 0, 0);
}

.base_sent {
  justify-content: flex-end;
  align-items: flex-end;
}
.base_sent > .avatar:after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 0;
    border: 5px solid white;
    border-right-color: transparent;
    border-top-color: transparent;
    box-shadow: 1px 1px 2px rgba(black, 0.2); // not quite perfect but close
}

.msg_sent > time{
    float: right;
}



.msg_container_base::-webkit-scrollbar-track
{
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    background-color: #F5F5F5;
}

.msg_container_base::-webkit-scrollbar
{
    width: 12px;
    background-color: #F5F5F5;
}

.msg_container_base::-webkit-scrollbar-thumb
{
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
    background-color: #555;
}

.btn-group.dropup{
    position:fixed;
    left:0px;
    bottom:0;
}

下面的代码函数展示了当用户输入并点击发送时，用户将以发送和接收的形式看到他发送的消息。

是否有一种自动滚动到底部的方式？

听起来，你想要的实际上非常简单，也许你可以制作一个简单的示例，而不是将大量代码堆积到问题中。（或者，将其转换为可运行的代码片段也可以） - DBS
@DBS 我进行了转储，因为我在聊天框中使用了自定义滚动条方式，如果没有编写完整的代码，人们可能会认为我需要翻页才能滚动。 - Divyam Solanki
我在发布的代码中没有看到任何自定义滚动条，如果您只是指样式，则这并不会真正影响问题。 - DBS
6个回答
21

将以下代码添加到您的代码中：

$(".msg_container_base").stop().animate({ scrollTop: $(".msg_container_base")[0].scrollHeight}, 1000);

所以提交按钮的函数看起来像这样：

$("#submit").click(function() {
    var data = $("#btn-input").val();
        //console.log(data);
        $('chat_log').append('<div class="row msg_container base_sent"><div class="col-md-10 col-xs-10"><div class="messages msg_receive"><p>'+data+'</p></div></div></div><div class="row msg_container base_receive"><div class="col-md-10 col-xs-10"><div class="messages msg_receive"><p>'+data+'</p></div></div></div>');
        clearInput();
        $(".msg_container_base").stop().animate({ scrollTop: $(".msg_container_base")[0].scrollHeight}, 1000);
});

JSFiddle演示

6
如果该程序每秒收到超过1条消息，它就会开始落后，所以在执行动画之前插入 .stop() 命令。 - DBS
1
@DBS - 太棒了的建议 - 我已经将它添加到我的答案中。再次感谢。 - NickyTheWrench
10

我有一个非常简单的代码解决方案：经过测试，它可行。解释：div 元素具有 id chat-window，我们使用 scrollTo 方法，在其内部从 0 开始并保持滚动到聊天窗口底部，如何到达底部？简单地使用 scrollHeight 我们可以得到聊天窗口的高度，并将其保持向下滚动到聊天窗口底部。

JavaScript：

chatWindow = document.getElementById('chat-window'); 
var xH = chatWindow.scrollHeight; 
chatWindow.scrollTo(0, xH);

HTML：

<div id="chat-window"></div>
正是我所寻找的。 - Nemuga Dev
9

看起来您正在使用JQuery，您可以使用animate函数平稳地完成此操作。

$('#myMessageContainer').stop ().animate ({
  scrollTop: $('#myMessageContainer')[0].scrollHeight
});
3
非常感谢 @Pranesh - Divyam Solanki
这似乎不起作用...它总是尝试滚动到容器的最大高度（基于屏幕大小，而不是滚动），这意味着一旦您有足够的滚动来使父级大小加倍，它就停止工作了。你基本上只是在说“滚动到<通用数字>”。 - DBS
@DBS 我有一个fiddle的链接，欢迎你来试一下。 - Pranesh Ravi
我在添加了5-6条消息之后（根据屏幕尺寸会有所变化，继续滚动即可停止），你已经滚动到容器的最大高度，并且它将停止工作。 - DBS
@DIVYAMSOLANKI 已更新代码，请确认 - Pranesh Ravi
1

非常简单的代码，用于检查用户是否在底部。 如果用户在底部，则聊天页面将自动滚动到新消息处。 如果用户向上滚动，则页面不会自动滚动到底部。

JS代码 - 

var checkbottom;
jQuery(function($) {
$('.chat_screen').on('scroll', function() {
    var check = $(this).scrollTop() + $(this).innerHeight() >= $(this) 
[0].scrollHeight;
    if(check) {
       checkbottom = "bottom";
    }
    else {
    checkbottom = "nobottom";
    }
})
});
window.setInterval(function(){
if (checkbottom=="bottom") {
var objDiv = document.getElementById("chat_con");
objDiv.scrollTop = objDiv.scrollHeight;
}
}, 500);

HTML代码 - 

<div id="chat_con" class="chat_screen">
</div>
0

在开始和结束消息追加函数之前尝试添加这些行。对我有用。

document.getElementById('chatbox').scrollIntoView({block: 'end', behavior: 'smooth'});

//message function

document.getElementById('chatbox').scrollIntoView({block: 'end', behavior: 'smooth'});

无法编译 - JamesMatson
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接