Question

我使用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：只是一些边距和填充，颜色和东西，没什么花哨的

Answer 1

我有同样的问题，首先调用更新，然后在调用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);

Answer 2

每次通过ajax加载新内容时，似乎都会初始化插件。你应该初始化插件一次（在click事件之外）：

$(".main_list.messages").mCustomScrollbar(W.scroll_prefs);

当ajax调用完成并且新内容已完全加载时，请调用mCustomScrollbar 更新方法（根据新内容更新滚动条），然后滚动到底部：

$(".main_list.messages").mCustomScrollbar("update");
$(".main_list.messages").mCustomScrollbar("scrollTo", "bottom");

Answer 3

我用过：

var d = $('#selector');
d.mCustomScrollbar({
    setTop: d.height() + "px"
});

从DIV的底部开始。

Answer 4

尝试在您调用自定义滚动条的容器底部添加填充。

.main_list.messages  
{ 
  padding-bottom: 10px;   
}

jQuery Custom Content Scroller不会滚动到底部

4 个答案: