jquery scrollTop 到元素 scrollHeight 不起作用？答案

【问题标题】：jquery scrollTop to the elements scrollHeight is not working?jquery scrollTop 到元素 scrollHeight 不起作用？
【发布时间】：2018-06-19 17:47:29
【问题描述】：

我正在创建一个简单的聊天。每次收到新消息时，我都需要滚动到屏幕底部。

但是，我的滚动到底部的代码根本不起作用。

为了证明这一点，我创建了这个小提琴：

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");

有人可以就这个问题提出建议吗？

谢谢你。

【问题讨论】：

标签： javascript jquery

【解决方案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>

【讨论】：

这可能是 Chrome 的问题，因为您的代码无法向上滚动......所以顶部缺少几百个像素。

【解决方案2】：

   $("html, body").animate({"scrollTop": $('#messages')[0].scrollHeight}, "slow");

您选择了前面的消息，您需要 html 正文，因为那是滚动的内容：)

它工作了吗：https://jsfiddle.net/jcp1sw23/31/

【讨论】：

【解决方案3】：

因为您的滚动元素不是#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);

});

【讨论】：

【解决方案4】：

在这里，您正在对消息ul 元素应用滚动。在观看您的演示后，很明显您的滚动处于body 级别，因此滚动代码应为：

var $t = $('html');
$t.animate({"scrollTop": $('body')[0].scrollHeight}, "slow");

这里你的body 有 scrollHeight 需要在固定高度的父容器上设置，即html 元素。

这是添加上述代码后工作的 js fiddle 链接：

https://jsfiddle.net/jcp1sw23/27/

【讨论】：