I have a trouble to generate a animation to the end of my live chat
I tried :
document.getElementById("chat-body").scrollTop = document.getElementById("chat-body").scrollHeight;
but with no result there is my html code for the chat:
<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>
I append elements to: <li id="conversation"></li>
and use this template : http://bootdey.com/snippets/view/messages-chat-widget
Thanks a lot for reply.
I think you want to use the .nano-content since it contains your ul and items:
var chat = $('.nano-content');
chat.scrollTop(chat.prop('scrollHeight'));
Or if you want to get fancy and animate the scroll:
chat.animate({scrollTop:chat.prop('scrollHeight')});
Solved by :
var chat = $('.nano-content');
var chatItems = $('.mar-btm').length;
chat.animate({scrollTop: (chat.prop('scrollHeight') * chatItems)});
Thanks a lot @nfreeze
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.