我将 mCustomScrollbar 用于页面上的一个元素,该元素有时会重新加载。这是一个消息视图,当用户单击另一个对话时,会加载此对话的消息。但是,当我想在加载后滚动到底部时,由于最新消息位于底部,它不会滚动到底部,而是滚动到底部上方的几个像素(“一些”可以随机在 10 到 200 像素之间)。
下面是一个简化的例子:
// code to load another conversation
$(".conversations .conversation").click(function (e) {
var $this = $(this);
$.ajax({
url: W.sprintf('/messages/%s/fetch', $this.attr("data-cid")),
dataType: 'html'
}).done(function(data) {
$('.main_pane.messages').html(data);
// a function call to set the hight of .main_list.messages goes here
$(".main_list.messages").mCustomScrollbar(W.scroll_prefs);
$(".main_list.messages").mCustomScrollbar("scrollTo", "bottom");
// also tried adding an element at bottom and scrolling to this
// and scrollTo Number.MAX_VALUE
// also tried putting the two mCustomScrollbar lines both into
// setTimeout()
});
});
<!-- this is what gets loaded -->
#conversation
.head
-# some foo
.conv_body
.main_list.messages.custom-scroll.hide-scrollbar.start-bottom
-# basically a bunch of these below
.listelem.msg
.left
= image_tag(user.avatar.image(:icon), size: avatar_size(:icon))
.right
%span.datetime= fmt_time(msg[:datetime], :time)
.middle
.name= link_to(user.login, user)
.text= msg[:text]
#new_message_container.main_input.open.threeline
= form_for(@message) do |f|
-# ...
CSS:只有一些边距、填充、颜色和其他东西,没什么花哨的