我有这个代码和
.cscc
.messages{
width:95%;
height:200px;
overflow:auto;
}
.message{
width:98%;
&:hover{
background: #d6d6f0;
cursor: pointer;
}
}
.message-author{
float:left;
}
.message-date{
float:right;
}
.message-header{
display:block;
}
.message-content{
padding:1em
}
html.erb
<div class="messages" data-url="<%= dialog_url @dialog_user %>">
<div id="messages-container">
<% @messages.each do |msg| %>
<div class="message">
<div class="message-header">
<div class="message-author"> <%= msg.from.username %> </div>
<div class="message-date"> <%= msg.created_at %> </div>
</div>
<br>
<div class="message-content"> <%= msg.body %> </div>
</div>
<% end %>
</div>
js
jQuery ->
$(document).ready ->
$(".messages").niceScroll({cursorcolor:"#b8b8b8"})
val1 = $("#messages-container").height()
val2 = $(".message").last().height()
val = val1 - val2 - 100
$("#messages-container").animate marginTop: "-=" + val + "px"
当 js 动画完成后,我失去了滚动 div 的能力
一些帮助图片
或者你可以在这里看到问题 ccc-chat.herokuapp.com (注册任何假电子邮件)