Question

我在我设计的简单聊天界面中使用jScrollPane作为滚动条。我在这里遇到的问题是jScrollPane不会自动滚动到底部。 jScrollPane确实有一个方便的选项'stickToBottom'，我已设置为true，并且我已将'autoReinitalise'设置为true，因为内容会动态添加到特定div。现在，一旦聊天框被填满并且添加了滚动条，我希望jScrollPane能够自动滚动到底部并坚持下去。但事实并非如此。我首先手动滚动到底部然后它会粘在那里。所以我尝试创建一个innerdiv，其高度比它的父级（具有滚动条）高1个像素，这样从一开始滚动条就可见了。通过api我然后在Y轴上滚动到100％，这样滚动手柄完全向下。但是在这种情况下，当我的聊天框被填充并且内容超出可用空间时，滚动条不会粘在底部，它甚至会再次滚动到顶部。

我已经设置了一个非常简单的测试页面：

http://www.webtrail.nl/jscrollpane-example

希望有人可以帮助我。谢谢！

Answer 1

默认情况下你应该启用maintainPosition和stickToBottom，但是当内容完全占据滚动div的高度时，棘手的部分只调用scrollToBottom()一次，你应该是这样做是因为你仍然希望maintainPosition功能起作用（这样如果用户滚动到顶部，即使有新内容到达，他也会留在那里）。

如果您多次拨打scrollToBottom()，则每次都会滚动到底部（从而取消maintainPosition功能）。

如果初始内容大于页面的高度，则可以在页面加载时调用scrollToBottom，但如果不是，则需要计算内容大小=滚动div高度的时间。

我采用了一种方法来举例说明这一点（当我添加24个div时，div需要滚动，所以我再调用scrollToBottom）：

var counter = 1;
function addDummyContentToChatBox(api) {
    $("<div>This is some dummy content.</div>").appendTo("#chatbox_inner");
    if (counter == 24) {
        api.scrollToBottom(false);
    }
    api.reinitialise();
    counter++;
}

$(function() {

    var api = $('#chatbox').jScrollPane({
      stickToBottom: true,
      maintainPosition: true
    }).data('jsp');

    setInterval(function() {
      addDummyContentToChatBox(api);
    }, 233);
});

完整来源：http://jsfiddle.net/STHgr/37/

jScrollPane并不坚持到底

1 个答案: