我使用mCustomScrollbar作为页面上的元素,有时会重新加载。这是一个消息视图,当用户点击另一个对话时,会加载此对话的消息。但是,当我想在加载后滚动到底部,因为最新的消息在底部,它不会滚动到底部,而是在底部以上几个像素(“一些”可以在10到200px之间随机滚动)。
以下是一个简化示例:
// 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:只是一些边距和填充,颜色和东西,没什么花哨的
答案 0 :(得分:7)
我有同样的问题,首先调用更新,然后在调用scrollTo底部之前添加超时1000来解决它
$('#commentArea .mCSB_container ').append('<span class="oneComment">'+outputText+'</span><span class="commentBreaker"></span>');
$("#commentArea").mCustomScrollbar("update");
setTimeout(function(){
$("#commentArea").mCustomScrollbar("scrollTo","bottom");
},1000);
答案 1 :(得分:4)
每次通过ajax加载新内容时,似乎都会初始化插件。你应该初始化插件一次(在click事件之外):
$(".main_list.messages").mCustomScrollbar(W.scroll_prefs);
当ajax调用完成并且新内容已完全加载时,请调用mCustomScrollbar
更新方法(根据新内容更新滚动条),然后滚动到底部:
$(".main_list.messages").mCustomScrollbar("update");
$(".main_list.messages").mCustomScrollbar("scrollTo", "bottom");
答案 2 :(得分:0)
我用过:
var d = $('#selector');
d.mCustomScrollbar({
setTop: d.height() + "px"
});
从DIV的底部开始。
答案 3 :(得分:0)
尝试在您调用自定义滚动条的容器底部添加填充。
.main_list.messages
{
padding-bottom: 10px;
}