jQuery 自定义内容滚动器不会滚动到底部答案

【问题标题】：jQuery Custom Content Scroller doesn't scroll to bottomjQuery 自定义内容滚动器不会滚动到底部
【发布时间】：2013-05-22 13:20:31
【问题描述】：

我将 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：只有一些边距、填充、颜色和其他东西，没什么花哨的

【问题讨论】：

标签： jquery scroll jquery-plugins mcustomscrollbar

【解决方案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);

【讨论】：

通过这个解决方案，滚动从上到下。我想直接在底部显示滚动。我怎样才能做到这一点。请帮忙。
谢谢。是工作。但不需要setTimeout函数。只有 $("#commentArea").mCustomScrollbar("scrollTo","bottom");够了。

【解决方案2】：

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

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

ajax调用完成，新内容加载完毕，调用mCustomScrollbarupdate方法（根据新内容更新滚动条），然后滚动到底部：

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

【讨论】：

我必须这样做，因为我销毁并重新创建了滚动条所在的元素。如果我只是按照您的建议将初始化替换为更新，则会出现错误，因为滚动条知道/所在的元素不再存在：未捕获的 TypeError：无法读取未定义的 jquery.mCustomScrollbar.concat 的属性“offsetTop”。 min.js?body=1:5 如果我错了请纠正我
我不知道您的 html 代码如何（.main_pane.messages 和 .main_list.messages 堆栈）但也许这可能会有所帮助...您的原始内容（在 .main_list.messages 中）驻留在 .mCSB_container div 中，所以也许您可以在 .mCSB_container 中附加 ajax 数据（而不是直接在 .main_pane.messages 中）。我不知道这是否可行，因为我不知道您的 html 代码。此外，您可以尝试将“完成”替换为“始终”或“完成”，因为在调用滚动到底部（加载图像？）时内容似乎没有完全加载。您还可以在 scrollTo 中添加 1 秒的时间间隔。

【解决方案3】：

我用过：

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

从 DIV 的底部开始。

【讨论】：

【解决方案4】：

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

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

【讨论】：