jScrollPane 不位于底部

Question

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

我设置了一个非常简单的测试页，但存在此问题：

http://www.webtrail.nl/jscrollpane -示例

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

Answer 1

默认情况下，您应该启用 maintainPosition 和 stickToBottom，但棘手的部分是仅调用 scrollToBottom() 一次，此时内容将完全占据屏幕滚动 div 的高度，您应该这样做，因为您仍然希望 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/