jScrollPane没有贴在底部

jScrollPane doesn't sitck to bottom

本文关键字：底部 jScrollPane      更新时间：2023-09-26

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

我设置了一个非常简单的测试页面，有这个问题:

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

希望有人能在这里帮助我。谢谢!

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

如果您多次调用scrollToBottom()，它将每次滚动到底部(从而消除maintainPosition功能)。

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

我做了一个方法来举例说明这一点(当我添加24divdiv需要滚动，所以我调用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/

相关文章：