jScrollPane不会坐视下

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

我已经建立了一个非常简单的testpage有这个问题：

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

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

来源

2011-12-16 Guido

你能粘贴HTML + CSS + js成jsfiddle？ – alessioalex 2011-12-16 14:08:35

我已更新我的帖子，并链接到示例页面。 – Guido 2011-12-16 17:58:51

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

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

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

我做了举例说明本的方法（当我添加24周的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/

来源

2011-12-17 09:58:10 alessioalex

jScrollPane不会坐视下

回答

相关问题