使用jquery或js在实时聊天中生成底部滚动

时间:2016-11-08 19:30:22

标签: javascript jquery html

我在实时聊天结束时生成动画很麻烦

我试过了:

ng-view

但没有结果,我的聊天内容是html代码:

document.getElementById("chat-body").scrollTop = document.getElementById("chat-body").scrollHeight;

我将元素附加到:<div id="panel" class="panel"> <!--Widget body--> <div id="chat-body" class="collapse in"> <div class="nano has-scrollbar" id="scrollbar" style="height:380px"> <div class="nano-content pad-all" tabindex="0" style="right: -17px;"> <ul class="list-unstyled media-block"> <li class="mar-btm" id="conversation"> </li> </ul> </div> <div class="nano-pane"><div class="nano-slider" style="height: 141px; overflow: auto"></div></div></div> <!--Widget footer--> <div class="panel-footer" style="background-color: transparent!important; max-height: 20%;"> <form id="send_message"> <div class="row"> <div class="youplay-input col-xs-7 col-sm-8 text-center" style="margin-left: 4%"> <input type="text" id="message" placeholder="Enter your message"> </div> <div class="col-xs-4 col-md-3"> <button class="btn btn-success btn-sm btn-block" type="submit">Send</button> </div> </div> </form> </div> </div> </div> 并使用此模板:http://bootdey.com/snippets/view/messages-chat-widget

非常感谢您的回复。

编辑1:

解决方案:

<li id="conversation"></li>

2 个答案:

答案 0 :(得分:2)

我认为你想使用 .nano-content ,因为它包含你的ul和项目:

var chat = $('.nano-content');
chat.scrollTop(chat.prop('scrollHeight'));

或者,如果你想获得幻想和动画滚动:

chat.animate({scrollTop:chat.prop('scrollHeight')});

答案 1 :(得分:0)

解决方案:

 var chat = $('.nano-content');
 var chatItems = $('.mar-btm').length;
 chat.animate({scrollTop: (chat.prop('scrollHeight') * chatItems)});

非常感谢@nfreeze