我正在创建一个简单的聊天室。每当收到新消息时,我都需要滚动到屏幕底部。
但是,我滚动到底部的代码根本不起作用。
为了证明这一点,我创建了这个小提琴:
https://jsfiddle.net/jcp1sw23/
这是我的jquery代码:
$(document).on("click",".sendPm",function() {
var txt = $('#message2').val();
var htm = '<li id="'+ txt +'" class="self"><div class="msg"><p>'+ txt +'</p><time>7:45</time></div></li>';
$(".endDivChat").before(htm);
var $t = $('#messages');
$t.animate({"scrollTop": $('#messages')[0].scrollHeight}, "slow");
});
如果在messages
元素满之前键入一些消息,则应该看到滚动条出现。但是它不会设置动画或滚动到底部。
具体来说,这是我滚动到底部的代码:
var $t = $('#messages');
$t.animate({"scrollTop": $('#messages')[0].scrollHeight}, "slow");
有人可以请教这个问题吗?
非常感谢。
答案 0 :(得分:1)
$("html, body").animate({"scrollTop": $('#messages')[0].scrollHeight}, "slow");
您正在选择前面的消息,您想要的是html正文,因为那是滚动的内容:)
答案 1 :(得分:1)
因为滚动元素不是#messages
元素,而是body
:所以请尝试以下操作:
$(document).on("click", ".sendPm", function() {
var txt = $('#message2').val();
var htm = '<li id="' + txt + '" class="self"><div class="msg"><p>' + txt + '</p><time>7:45</time></div></li>';
$(".endDivChat").before(htm);
$("html, body").animate({
scrollTop: 2000
}, 600);
});
答案 2 :(得分:1)
此处您要对消息ul
元素应用滚动。在观看演示之后,很明显您的滚动处于body
级别,因此滚动代码应为:
var $t = $('html');
$t.animate({"scrollTop": $('body')[0].scrollHeight}, "slow");
您的body
的scrollHeight需要在固定高度的父容器(即html
元素)上设置。
这是js小提琴链接,它在添加上述代码后可以正常工作:
答案 3 :(得分:1)
您必须使用
$("html, body").animate({ scrollTop: 1000 }, 1000);
在用户发送消息时将滚动条滚动到底部
$(document).on("click",".sendPm",function() {
var txt = $('#message2').val();
var htm = '<li id="'+ txt +'" class="self"><div class="msg"><p>'+ txt +'</p><time>7:45</time></div></li>';
$(".endDivChat").before(htm);
$("html, body").animate({ scrollTop: 1000 }, "slow");
});
@import url(https://fonts.googleapis.com/css?family=Lato:100,300,400,700);
@import url(https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css);
html, body {
background: #e5e5e5;
font-family: 'Lato', sans-serif;
/*margin: 0px auto;*/
}
::selection{
background: rgba(82,179,217,0.3);
color: inherit;
}
a{
color: rgba(82,179,217,0.9);
}
/* M E N U */
.menu {
position: absolute;
top: 0px;
left: 0px;
right: 0px;
width: 100%;
height: 50px;
background: rgba(82,179,217,0.9);
z-index: 100;
-webkit-touch-callout: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
}
.back {
position: absolute;
width: 90px;
height: 50px;
top: 0px;
left: 0px;
color: #fff;
line-height: 50px;
font-size: 30px;
padding-left: 10px;
cursor: pointer;
}
.back img {
position: absolute;
top: 5px;
left: 30px;
width: 40px;
height: 40px;
background-color: rgba(255,255,255,0.98);
border-radius: 100%;
-webkit-border-radius: 100%;
-moz-border-radius: 100%;
-ms-border-radius: 100%;
margin-left: 15px;
}
.back:active {
background: rgba(255,255,255,0.2);
}
.name{
position: absolute;
top: 3px;
left: 110px;
font-family: 'Lato';
font-size: 25px;
font-weight: 300;
color: rgba(255,255,255,0.98);
cursor: default;
}
.last{
position: absolute;
top: 30px;
left: 115px;
font-family: 'Lato';
font-size: 11px;
font-weight: 400;
color: rgba(255,255,255,0.6);
cursor: default;
}
/* M E S S A G E S */
.chat {
list-style: none;
background: none;
margin: 0;
padding: 0 0 50px 0;
margin-top: 60px;
margin-bottom: 10px;
}
.chat li {
padding: 0.5rem;
overflow: hidden;
display: flex;
}
.chat .avatar {
width: 40px;
height: 40px;
position: relative;
display: block;
z-index: 2;
border-radius: 100%;
-webkit-border-radius: 100%;
-moz-border-radius: 100%;
-ms-border-radius: 100%;
background-color: rgba(255,255,255,0.9);
}
.chat .avatar img {
width: 40px;
height: 40px;
border-radius: 100%;
-webkit-border-radius: 100%;
-moz-border-radius: 100%;
-ms-border-radius: 100%;
background-color: rgba(255,255,255,0.9);
-webkit-touch-callout: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
}
.chat .day {
position: relative;
display: block;
text-align: center;
color: #c0c0c0;
height: 20px;
text-shadow: 7px 0px 0px #e5e5e5, 6px 0px 0px #e5e5e5, 5px 0px 0px #e5e5e5, 4px 0px 0px #e5e5e5, 3px 0px 0px #e5e5e5, 2px 0px 0px #e5e5e5, 1px 0px 0px #e5e5e5, 1px 0px 0px #e5e5e5, 0px 0px 0px #e5e5e5, -1px 0px 0px #e5e5e5, -2px 0px 0px #e5e5e5, -3px 0px 0px #e5e5e5, -4px 0px 0px #e5e5e5, -5px 0px 0px #e5e5e5, -6px 0px 0px #e5e5e5, -7px 0px 0px #e5e5e5;
box-shadow: inset 20px 0px 0px #e5e5e5, inset -20px 0px 0px #e5e5e5, inset 0px -2px 0px #d7d7d7;
line-height: 38px;
margin-top: 5px;
margin-bottom: 20px;
cursor: default;
-webkit-touch-callout: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
}
.other .msg {
order: 1;
border-top-left-radius: 0px;
box-shadow: -1px 2px 0px #D4D4D4;
}
.other:before {
content: "";
position: relative;
top: 0px;
right: 0px;
left: 40px;
width: 0px;
height: 0px;
border: 5px solid #fff;
border-left-color: transparent;
border-bottom-color: transparent;
}
.self{
justify-content: flex-end;
align-items: flex-end;
}
.self li{
background: #e1ffc7;
}
.self .msg {
order: 1;
border-bottom-right-radius: 0px;
box-shadow: 1px 2px 0px #D4D4D4;
}
.self .avatar {
order: 2;
}
.self .avatar:after {
content: "";
position: relative;
display: inline-block;
bottom: 19px;
right: 0px;
width: 0px;
height: 0px;
border: 5px solid #fff;
border-right-color: transparent;
border-top-color: transparent;
box-shadow: 0px 2px 0px #D4D4D4;
}
.msg {
background: white;
min-width: 50px;
padding: 10px;
border-radius: 2px;
box-shadow: 0px 2px 0px rgba(0, 0, 0, 0.07);
}
.msg p {
font-size: 0.8rem;
margin: 0 0 0.2rem 0;
color: #777;
}
.msg img {
position: relative;
display: block;
width: 450px;
border-radius: 5px;
box-shadow: 0px 0px 3px #eee;
transition: all .4s cubic-bezier(0.565, -0.260, 0.255, 1.410);
cursor: default;
-webkit-touch-callout: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
}
.self .msg{
background: #e1ffc7 !important;
}
@media screen and (max-width: 800px) {
.msg img {
width: 300px;
}
}
@media screen and (max-width: 550px) {
.msg img {
width: 200px;
}
}
.msg time {
font-size: 0.7rem;
color: #ccc;
margin-top: 3px;
float: right;
cursor: default;
-webkit-touch-callout: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
}
.msg time:before{
content:"\f017";
color: #ddd;
font-family: FontAwesome;
display: inline-block;
margin-right: 4px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="menu">
<div class="back"> <img src="https://media.gettyimages.com/photos/close-up-portrait-of-teenage-girl-picture-id518339053" draggable="false"/></div>
<div class="name">test user</div>
<div class="last status">Offline</div>
</div>
<ul class="chat" id="messages">
<div class="endDivChat"></div>
<!--<li class="other">
<div class="avatar"><img src="https://i.imgur.com/DY6gND0.png" draggable="false"/></div>
<div class="msg">
<p>Hola!</p>
<p>Te vienes a cenar al centro? <emoji class="pizza"/></p>
<time>20:17</time>
</div>
</li>
<li class="self">
<div class="avatar"><img src="https://i.imgur.com/HYcn9xO.png" draggable="false"/></div>
<div class="msg">
<p>Puff...</p>
<p>Aún estoy haciendo el contexto de Góngora... <emoji class="books"/></p>
<p>Mejor otro día</p>
<time>20:18</time>
</div>
</li>-->
</ul>
<div style="width:100%; height:44px; position:fixed; bottom:0; left:0;z-index:10;background:#fff;">
<input style="padding-left:15px;border:none;height:44px;width:80%;display:inline-block;float:left; -webkit-box-sizing: border-box; -moz-box-sizing: border-box;box-sizing: border-box;" id="message2" type="text" placeholder="Type here!"/>
<button style="color:rgba(82,179,217,0.9);font-size:24px;text-align:center;line-height:44px;width:20%;display:inline-block;float:left; -webkit-box-sizing: border-box; -moz-box-sizing: border-box;box-sizing: border-box;" class="sendPm" >
<div class="circle" style="">
<i class="zmdi zmdi-mail-send"></i> Send
</div>
</button>
</div>