我有这个模板代码：
<script type="text/javascript">
$(function(){
//submit new messages when the user hits enter if the message isnt blank
now.receiveMessage = function(name, message, messagetime){
$("#messages").append(
'<li class="message"><div class="sent"><a href="${path}"><img src="${gravatar}" alt="name" width="24px" height="24px" /></a><div class="display-name">'+messagetime+'<div class="body">'+ message +'</div></div></div></li>');
}
$("#text-input").keypress(function (e) {
if (e.keyCode != 13 /* Return */) return;
now.distributeMessage($("#text-input").val());
$("#text-input").attr("value", ""); // clear the entry field.
});
$("#send-button").click(function(){
now.distributeMessage($("#text-input").val());
$("#text-input").val("");
});
now.name = "${user}";
});
</script>
<div id="chat_window">
<div id="chat_title"><h2>Simple Chat</h2></div>
<div id="chat_container" style="display: block">
<div id="chat">
<ul id="messages">
<li class="message notice" id="no_one_there">
Fix me, if there are no users!
</li>
</ul>
</div>
</div>
<div id="chat-form">
<input type="text" id="text-input" />
<input type="button" value="Send" id="send-button" />
</div>
</div>
和这个CSS
div#chat {
width:100%;
height:100px;
overflow:scroll;
}
基本上它是一个聊天窗口，但我有一个块，我似乎无法弄清楚如何对齐
感谢
答案 0 :(得分：1)
你只需要
now.receiveMessage = function (name, message, messagetime) {
$("#messages").append( '<li class="message"><div class="sent"><a href="/"><img width="24px" alt="name" height="24px"></a><div class="display-name">' + messagetime + '<div class="body">' + message + '</div></div></div></li>');
document.getElementById("chat").scrollTop = document.getElementById("chat").scrollHeight;
}
完整的代码在这里。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<title>Welcome - Zeitgeist Movement Global Connect</title>
<base href="http://zmgc.net/">
<!-- Meta -->
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<meta lang="en" name="description" content="One back-office to bring them all and in the darkness bind them, in an anarchically scalable information system.">
<!-- Canonical URL for search engines -->
<link rel="canonical" href="http://zmgc.net/">
<!-- CSS -->
<link rel="stylesheet" href="/ui/core/css/yui/cssreset/reset-min.css" type="text/css"><link rel="stylesheet" href="/ui/core/css/yui/cssgrids/grids-min.css" type="text/css"><link rel="stylesheet" href="/ui/core/css/core.css" type="text/css"><link rel="stylesheet" href="/ui/core/css/flags-sprite.css" type="text/css"><link rel="stylesheet" href="/ui/core/css/widgets.css" type="text/css"><link rel="stylesheet" href="/ui/js_calendar/calendar-aruni.css" type="text/css"><link rel="stylesheet" href="/ui/wiki/style.css" type="text/css"><link rel="stylesheet" href="/ui/phoenix/style.css" type="text/css"><link rel="stylesheet" href="ui/phoenix/jquery/custom-theme/jquery-ui-1.8.16.custom.css" type="text/css"><link rel="stylesheet" href="/ui/core/css/jPlayer/jplayer.pink.flag.css" type="text/css"><link rel="stylesheet" href="/ui/core/css/jPlayer/zen.css" type="text/css"><link rel="stylesheet" href="/ui/core/css/jPlayer/ui.css" type="text/css"><link rel="stylesheet" href="/theme/style/;download" type="text/css">
<!-- JavaScript -->
<script src="/ui/core/js/jquery/jquery-1.6.2.min.js" type="text/javascript"></script><script src="/ui/core/js/javascript.js" type="text/javascript"></script><script src="/ui/core/js/raphaeljs/raphael-min.js" type="text/javascript"></script><script src="/ui/core/js/world.js" type="text/javascript"></script><script src="/ui/js_calendar/jquery.dynDateTime.pack.js" type="text/javascript"></script><script src="/ui/js_calendar/lang/calendar-en.js" type="text/javascript"></script><script src="ui/phoenix/jquery/jquery-ui-1.8.16.custom.min.js" type="text/javascript"></script><script src="/ui/core/js/jPlayer/jquery.jplayer.min.js" type="text/javascript"></script><script src="/ui/core/js/jPlayer/add-on/jplayer.playlist.min.js" type="text/javascript"></script><script src="/ui/core/js/jquery/add-on/jquery.rotate.js" type="text/javascript"></script><script src="/ui/core/js/tab.js" type="text/javascript"></script><script src="/ui/core/js/zplayer.js" type="text/javascript"></script>
<!-- Icon -->
<link rel="shortcut icon" href="/ui/phoenix/favicon.ico" type="image/x-icon">
</head>
<body>
<div id="wrap">
<!-- Add YUI3 grids-->
<div id="hd" class="yui3-g">
<div id="logo" class="yui3-u-1-12"><!-- logo width: 4.1666%-->
<h1 title="Welcome - Zeitgeist Movement Global Connect">
<a href="/" title="Welcome - Zeitgeist Movement Global Connect">Zeitgeist Movement Global Connect</a>
</h1>
</div> <!-- /logo-->
<div class="yui3-u-11-12"><!-- width: 95.8333%-->
<div class="yui3-g">
<div id="menu" class="yui3-u-1-2"><!-- menu width: 66.6666%-->
<ul>
<li><a href="/projects">Projects</a></li>
<li><a href="/news">News</a></li>
<li><a href="/calendar">Calendar</a></li>
<li><a href="/forums">Forums</a></li>
<li><a href="/;more">More »</a></li>
</ul>
</div>
<div id="user-menu" class="yui3-u-1-2"><!-- width: 33.33333%-->
<ul>
<li><a href="/./;login" class="login" title="Login">Login</a></li>
<li><a href="/;contact" class="contact" title="Contact">Contact</a></li>
<li><a href="/help" class="help" title="Help">Help</a></li>
<li><a href="/;advanced_search" class="advanced-search" title="Advanced Search">Advanced Search</a></li>
<li>
<form action=";browse_content" method="get">
<div class="search placeholder-field">
<input name="search_text" type="text">
<input value="Search" class="button" type="submit">
</div>
</form>
</li>
</ul>
</div>
</div> <!-- /yui3-g search and user profile-->
</div>
</div><!-- /yui3-g id="hd"-->
<div id="language">
<ul>
<li>
<a id="lang-en" href="http://zmgc.net/?language=en" class="selected" title="English">English</a>
</li><li>
<a href="http://zmgc.net/?language=fr" id="lang-fr" title="Français">Français</a>
</li>
</ul>
</div>
<!-- Bread crumbs -->
<div>
<label>
<!-- Location & Views-->
<div id="location">
<div id="breadcrumbs">
location » <span><a href="/" title="Zeitgeist Movement Global Connect">Zeitgeist Movement Global Conn…</a></span>
</div>
</div>
<div id="submenu">
<span class="menu active">
<a href="/./;view">Welcome</a>
|
</span><span class="menu ">
<a href="/./;browse_content">Browse Content</a>
|
</span><span class="menu ">
<a href="/./;preview_content">Preview Content</a>
|
</span><span class="menu ">
<a href="/./;links">Links</a>
|
</span><span class="menu ">
<a href="/./;backlinks">Backlinks</a>
|
</span><span class="menu ">
<a href="/./;control_panel">Advanced</a>
</span>
</div>
</label>
</div><!-- /location-->
<!-- /Bread crumbs -->
<div id="page">
<!-- body -->
<div class="yui-g">
<!-- all other templates go within this block -->
<div class="yui3-g"><!-- content -->
<div class="yui3-u-1-2"><!-- welcome block 40%-->
<div class="welcome">
<h1>Welcome to the Zeitgeist Movement portal!</h1>
<p>
Founded in 2008, The Zeitgeist Movement is a Sustainability Advocacy Organization which conducts community based activism and awareness actions through a network of Global/Regional Chapters, Project Teams, Annual Events, Media and Charity Work.</p>
</div> <!-- / welcome block 40%-->
<!-- latest activities-->
<div class="box-holder">
<div class="box">
<div class="holder">
<div class="frame">
<div class="box-content">
<h3>
<span>All the latest activities ...</span>
</h3>
<ul class="supports-list">
<li class="">
<img src="/ui/core/resources/ico-wrote-petition.gif" alt="wrote-petition">
<p>
<strong>Katia</strong> signed up to help with the Z-Day Festival: London</p>
<a href="#" title="Sign up to help">Sign up to help</a>
</li>
<li class="">
<img src="/ui/core/resources/ico-donate.gif" alt="wrote-petition">
<p>
<strong>Luisa</strong> donated 5 € towards the Occupy London Fund </p>
<a href="#/" title="Wish to donate...">Wish to donate...</a>
</li>
<li class="last">
<img src="/ui/core/resources/ico-wrote-petition.gif" alt="wrote-petition">
<p>
<strong>Patricia</strong> signed up to help with the Z-Day Festival: London</p>
<a href="#/" title="Sign up to help">Sign up to help</a>
</li>
</ul>
</div> <!-- /box-content-->
</div> <!-- /frame-->
</div> <!-- /holder-->
</div> <!-- /box-->
</div> <!-- /box-holder-->
<!-- /latest activities-->
<!-- tabs-->
<script type="text/javascript">
$(function() {
$('#container-1').tabs();
$("#container-2 > ul").tabs({
navClass: "ui-tabs-sub-nav",
selectedClass: 'ui-tabs-sub-selected',
unselectClass: 'ui-tabs-sub-unselect',
disabledClass: 'ui-tabs-sub-disabled',
panelClass: 'ui-tabs-sub-panel',
loadingClass: 'ui-tabs-sub-loading'
});
});
</script>
<div id="container-1">
<ul>
<li><a href="#actions"><span>Actions</span></a></li>
<li><a href="#news"><span>News</span></a></li>
<li><a href="#events"><span>Events</span></a></li>
<li><a href="#chapters"><span>Chapters</span></a></li>
<li><a href="#forums"><span>Forums</span></a></li>
</ul>
<div id="actions">
{actions}
<ul>
<li><a href="#actions"><span>Actions</span></a></li>
<li><a href="#news"><span>News</span></a></li>
<li><a href="#events"><span>Events</span></a></li>
<li><a href="#chapters"><span>Chapters</span></a></li>
<li><a href="#forums"><span>Forums</span></a></li>
</ul>
</div>
<div id="news">
{news}
</div>
<div id="events">
{events}
</div>
<div id="chapters">
<div id="container-2">
<ul>
<li><a href="#chapter-1"><span>Africa</span></a></li>
<li><a href="#chapter-2"><span>Americas</span></a></li>
<li><a href="#chapter-3"><span>Asia</span></a></li>
<li><a href="#chapter-4"><span>Europe</span></a></li>
</ul>
<div id="chapter-1">
Africa
</div>
<div id="chapter-2">
Americas
</div>
<div id="chapter-3">
Asia
</div>
<div id="chapter-4">
Europe
</div>
</div>
</div>
<div id="forums">
{forums}
</div>
</div>
<!-- /tabs-->
</div><!-- /welcome block 40%-->
<div class="yui3-u-1-4 media"><!-- movies, radio and events block 40%-->
<!-- player widget-->
<input value="" id="tmp_duration" type="hidden">
<div id="jquery_jplayer_1" class="jp-jplayer">
<img id="jp_poster_0">
</div>
<div id="jp_container_1" class="jp-video">
<div class="jp-video-play">
<a href="javascript:;" class="jp-video-play-icon" tabindex="1">play</a>
</div>
<div class="jp-type-playlist">
<div class="jp-gui jp-interface">
<div class="jp-progress">
<div class="jp-seek-bar">
<div class="jp-play-bar"></div>
</div>
</div>
<div id="panel"><!-- /id="panel" -->
<div class="jp-current-time">00:05</div>
<div class="jp-duration">00:33</div>
<div class="jp-title"><ul><li>Item Title</li></ul>
</div>
<div class="jp-controls-holder"> <!-- class="jp-controls-holder" -->
<ul class="jp-controls">
<li><a href="javascript:;" class="jp-previous" tabindex="1">previous</a></li>
<li><a href="javascript:;" class="jp-play" style="display: block;" tabindex="1">play</a></li>
<li><a href="javascript:;" class="jp-pause" style="display: none;" tabindex="1">pause</a></li>
<li><a href="javascript:;" class="jp-next" tabindex="1">next</a></li>
<li><a href="javascript:;" class="jp-stop" tabindex="1">stop</a></li>
<li><a href="javascript:;" class="jp-mute" tabindex="1" title="mute">mute</a></li>
<li><a href="javascript:;" class="jp-unmute" tabindex="1" title="unmute" style="display: none;">unmute</a></li>
<li><a href="javascript:;" class="jp-volume-max" tabindex="1" title="max volume">max volume</a></li>
</ul>
<div class="jp-volume-bar">
<div class="jp-volume-bar-value" style="width: 80%; "></div>
</div>
</div> <!-- /class="jp-controls-holder" -->
</div> <!-- /id="panel" -->
</div>
<a href="#" class="btn-slide">Slide bar</a>
<div id="tab" class="tabsBlock">
<ul class="tabs">
<li><a index="1" href="#tabs-1" title="tabs-1">Video</a></li>
<li><a index="2" href="#tabs-2" title="tabs-2">Audio</a></li>
<li><a index="3" href="#tabs-3" title="tabs-3">Films</a></li>
</ul>
<div index="1" class="jp-playlist">
<div id="tabs-1" class="tab-item default">
<ul>
<li class="list">
<a href="javascript:;" title="unselect" m4v="http://www.archive.org/download/Zeitgeist.Addendum/Zeitgeist.Addendum_512kb.mp4" ogv="http://www.archive.org/download/Zeitgeist.Addendum/Zeitgeist.Addendum.ogv" poster="http://www.archive.org/download/Zeitgeist.Addendum/Zeitgeist.Addendum.thumbs/Zeitgeist.Addendum_000060.jpg" class="track">
Zeitgeist: Addendum (2008)</a>
</li>
</ul>
</div>
</div>
<div index="2" class="jp-playlist" style="display: none;">
<div id="tabs-2" class="tab-item" style="display: none;">
<ul>
<li class="list"><a mp="http://www.archive.org/download/TzmDevPhoenixMeeting12-04-2011/ts3_recording_11_12155E7A5.mp3" href="javascript:;" title="unselect" poster="/ui/core/resources/jplayer-default0.jpg" class="track" oga="http://www.archive.org/download/TzmDevPhoenixMeeting12-04-2011/ts3_recording_11_12155E7A5.ogg">TZM Dev Phoenix Meeting 12-04-2011</a></li>
<li class="list"><a mp="http://www.archive.org/download/TzmDevPhoenixMeeting12-11-2011/Tzm-dev-phx12-11-11.mp3" href="javascript:;" title="unselect" poster="/ui/core/resources/jplayer-default0.jpg" class="track" oga="http://www.archive.org/download/TzmDevPhoenixMeeting12-11-2011/Tzm-dev-phx12-11-11.ogg">TZM Dev Phoenix Meeting 12-11-2011</a></li>
<li class="list"><a mp="http://www.archive.org/download/TzmDevPhoenixMeeting01-01-2012/ts3_recording_12_01.mp3" href="javascript:;" title="unselect" poster="/ui/core/resources/jplayer-default0.jpg" class="track" oga="http://www.archive.org/download/TzmDevPhoenixMeeting01-01-2012/ts3_recording_12_01.ogg">TZM Dev Phoenix Meeting 01-01-2012</a></li>
</ul>
</div>
</div>
<div index="3" class="jp-playlist" style="display: none;">
<div id="tabs-3" class="tab-item" style="display: none;">
<ul>
<li class="list"><a href="javascript:;" title="unselect" m4v="http://www.archive.org/download/ZeitgeistTheMovie/Zeitgeist_512kb.mp4" ogv="http://www.archive.org/download/ZeitgeistTheMovie/Zeitgeist.ogv" poster="http://www.archive.org/download/ZeitgeistTheMovie/Zeitgeist.gif" class="track">Zeitgeist</a></li>
<li class="list">
<a href="javascript:;" title="unselect" m4v="http://www.archive.org/download/Zeitgeist.Addendum/Zeitgeist.Addendum_512kb.mp4" ogv="http://www.archive.org/download/Zeitgeist.Addendum/Zeitgeist.Addendum.ogv" poster="http://www.archive.org/download/Zeitgeist.Addendum/Zeitgeist.Addendum.thumbs/Zeitgeist.Addendum_000060.jpg" class="track">
Zeitgeist: Addendum (2008)</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<!-- /player widget-->
<div class="yui3-g">
<div class="yui3-u-1-3" id="watch-related-container">
<!-- <iframe width="300px"height="200" src="http://www.youtube.com/embed/QYLLFpNn4lM" frameborder="0"></iframe> -->
<ul id="watch-related" class="video-list">
<!-- video-list-item -->
<li class="video-list-item">
<a href="videos/video-item" class="video-list-item-link">
<span class="ux-thumb-wrap contains-addto">
<span class="video-thumb">
<span class="clip">
<img src="/ui/core/resources/jplayer-default1.jpg" alt="clip-title">
<span class="uix-button-content">
<span class="addto-label">Add to</span>
</span>
</span><!-- /clip-->
<span class="video-time">14:30</span>
<button class="addto-button video-actions" type="button">
<img src="/ui/core/resources/pixel.gif" class="uix-addto-button">
</button>
<span dir="ltr" class="title" title="Video Title">Video Title</span>
<span class="stat">
by <span dir="ltr" class="yt-user-name ">username</span>
</span><!-- /stat-->
</span><!-- /video-thumb-->
</span><!-- /ux-thumb-wrap contains-addto-->
</a>
</li>
<!-- /video-list-item -->
</ul><!-- /watch-related .video-list-->
</div><!-- /watch-related-container-->
<div class="yui3-u-2-3">
<img src="../../ui/icons/48x48/skin.png" border="0">
events table
</div><!-- /yui3-u-2-3-->
</div><!-- /yui3-g-->
</div><!-- /movies, radio and events block 40%-->
<div class="yui3-u-1-4 chat"><!-- right side bar 20%-->
<!-- START DYNAMIC CONTENT -->
<iframe src="//www.facebook.com/plugins/likebox.php?href=https%3A%2F%2Fwww.facebook.com%2FTheZeitgeistMovement&width=290&height=290&colorscheme=light&show_faces=true&border_color&stream=false&header=true&appId=119920878043766" frameborder="0" allowTransparency="true" style="border:none; overflow:hidden; width:290px; height:290px;" scrolling="no"></iframe>
<!-- <script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script>
<fb:like-box href="http://www.facebook.com/zeitgeist" width="300" connections="15"></fb:like-box>
END DYNAMIC CONTENT -->
<div class="listings items">
<h3>Follow us on...</h3>
<a href="http://www.facebook.com/" target="_blank"><img src="/ui/core/resources/facebook.png" width="48" height="48" border="0"></a>
<a href="http://twitter.com/Zeitgeist" target="_blank"><img src="/ui/core/resources/twitter.png" width="48" height="48" border="0"></a>
<a href="http://feeds.feedburner.com/TheZeitgeistMovement" target="_blank"><img src="/ui/core/resources/rss_icon_48.jpg" width="48" height="48" border="0"></a>
<a href="http://www.youtube.com/user/TZMOfficialChannel" target="_blank"><img src="/ui/core/resources/youtube.png" width="48" height="48" border="0"></a>
</div> <!-- END DYNAMIC CONTENT -->
<!-- I LIKE IT -->
<div class="thumb-rating">
<form method="post" action="you-know-you-like-it" class="disabled">
<span class="thumbs-up">
<input alt="Please log in to rate this product" value="Like" disabled="disabled" name="lovinit" class="allowMultiSubmit like-button" type="submit"></span>
<span class="thumbs-down">
<input value="Ugh" disabled="disabled" name="hatedit" class="allowMultiSubmit dislike-button" type="submit"></span>
</form>
<div class="like-summary">
<span class="total-thumbs-up">
<span class="tally-total">0</span> likes,
</span>
<span class="total-thumbs-down">
<span class="tally-total">0</span> dislikes
</span>
</div>
<div class="discreet login-to-rate">
<a href="/;login" class="link-overlay">Log in</a> to rate.
</div>
</div>
<div class="button">
<ul>
<li class="forum"><a href="/forum">Forum</a></li>
</ul>
</div>
<!-- /I LIKE IT -->
<script src="http://zmgc.net:29080/nowjs/now.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
//submit new messages when the user hits enter if the message isnt blank
now.receiveMessage = function (name, message, messagetime) {
$("#messages").append(
'<li class="message"><div class="sent"><a href="/"><img width="24px" alt="name" height="24px"></a><div class="display-name">' + messagetime + '<div class="body">' + message + '</div></div></div></li>');
document.getElementById("chat").scrollTop = document.getElementById("chat").scrollHeight;
}
$("#text-input").keypress(function (e) {
if (e.keyCode != 13 /* Return */) return;
now.distributeMessage($("#text-input").val());
$("#text-input").attr("value", ""); // clear the entry field.
});
$("#send-button").click(function () {
now.distributeMessage($("#text-input").val());
$("#text-input").val("");
});
now.name = "";
});
</script>
<div id="chat_window">
<div id="chat_title"><h2>Simple Chat</h2></div>
<div id="chat_container" style="display: block">
<div id="chat">
<ul id="messages">
<li class="message notice" id="no_one_there">
Fix me, if there are no users!
</li>
</ul>
</div>
</div>
<div id="chat-form">
<input id="text-input" type="text">
<input value="Send" id="send-button" type="button">
</div>
</div>
<ul id="status">
<li><a href="#" id="usersLink">5 users</a></li>
<li><a href="#" id="usersLink">uptime: <span id="uptime">?</span></a></li>
<li><a href="#" id="usersLink">memory: <span id="rss">?</span>mb RSS</a></li>
</ul>
</div><!-- /right side bar 20%-->
</div><!-- /content -->
<!-- /all other templates go within this block -->
</div>
<!-- /body -->
</div><!-- /YUI3 grids-->
</div> <!-- /end of wrap-->
<div id="footer">
<div class="yui3-g" id="upper-footer"><!-- upper-footer -->
<div class="yui3-u-3-4 upper_footer">
<h4 id="tzm">Zeigeist Links</h4>
<ul class="footer_nav">
<h4>Zeigeist</h4>
<li>
<a href="/;about">About</a>
</li>
<li>
<a href="/blog">Blog</a>
</li>
<li>
<a href="/;contact">Contact & Support</a>
</li>
<li>
<a href="/training">Training</a>
</li>
<li>
<a href="#">Site Status</a>
</li>
</ul>
<ul class="footer_nav">
<h4>Tools</h4>
<li>
<a href="/;create">Chapter Generator</a>
</li>
<li>
<a href="#">Activies Board</a>
</li>
</ul>
<ul class="footer_nav">
<h4>Documentation</h4>
<li>
<a href="#">Chapter Sites</a>
</li>
<li>
<a href="#">Developers</a>
</li>
</ul>
<ul class="footer_nav">
<h4>External Links</h4>
<li>
<a href="#">News</a>
</li>
<li>
<a href="#">Media</a>
</li>
</ul>
</div><!-- /yui3-u-3-4 -->
<div id="worldmap" class="yui3-u-1-4"></div>
</div><!-- /upper-footer -->
<div id="lower-footer">
<ul>
<li class="space">
<h1 title="Welcome - Zeitgeist Movement Global Connect">
<a href="/" title="Welcome - Zeitgeist Movement Global Connect">
striving for a better future since 2008</a>
</h1>
</li>
<li><a href="/;about">About</a></li>
<li><a href="/;more">More</a></li>
<li><a href="/;login_form">(not logged in)</a></li>
</ul>
</div><!-- /lower-footer -->
</div><!-- /footer -->
<!--[if !IE 7]>
<style type="text/css">
#wrap {display:table;height:100%}
</style>
<![endif]-->
</body>
</html>
答案 1 :(得分：1)
我看到你只想做这个CSS，好吧，你可以，但它有它的缺点。让我们从一个简单的例子开始，说明如何使用html / css。
http://jsfiddle.net/sg3s/hkTaZ/
这不使用JS。
修改
对于您提供的链接中的聊天框，您需要添加以下样式：
#chat {
overflow: hidden;
position: relative;
}
#messages {
position: absolute;
bottom: 0;
}
但是，当你想滚动到顶部时，你必须实现一些能够滚动到顶部的东西。这需要一些JS来操纵内容的底层属性。
你指向 DOES 的库使用jQuery虽然它不是很明显，所以你可以使用jQuery来实现这个功能。
虽然看到你已经使用JS，但每次在@jams回答中将消息附加到聊天时，滚动到底部会更容易。
修改
看到您当前的实现使用javascript我建议您在每次将消息添加到#messages列表时将@jams建议滚动到底部。