具有动态高度和动态内容的 JScrollPane？答案

【问题标题】：JScrollPane with dynamic height and dynamic content?具有动态高度和动态内容的 JScrollPane？
【发布时间】：2012-06-14 14:51:10
【问题描述】：

我正在开发一个 Java Servlet，它可以生成带有包含数据库搜索结果的 div 的网页。

此 div 的高度定义为百分比（动态高度），并且内容具有显示/隐藏按钮（动态内容）。显示和隐藏功能由 div 元素的“onclick”属性激活。

我首先尝试使用此页面 (JScrollPaneDynamicHeight) 中的 javascript 来实现动态高度和此方法：

function refreshNav() {  
var pane = $('YOUR SELECTOR');  
var api = pane.data('jsp');  
api.reinitialise();  
}

...由 show/hide 方法调用，调用 reinitialise() 方法并允许动态内容。

它不能正常工作 - 在某些点击时它会起作用，在其他点击时滚动窗格会消失而不是重新出现，反之亦然。

我也尝试过将变量“api”设为全局 - 同样的问题。

我使用找到的 js 尝试的最新内容 here （仅不附加段落）。在快速响应和 CPU 活动之间进行权衡，所以我添加了一个 if 语句，它检查一个布尔值，描述内容或高度是否发生了变化。我已经使用“console.log()”来检查一切是否正常工作（布尔值更改、正在执行的 if 语句等）。

它是...但我仍然遇到与 JScrollPane 相同的问题。

我曾经在某处读到使用 html 的“onclick”属性是不好的做法 - 这可能是相关的吗？

如果您有任何关于可能出现问题的想法，我将不胜感激。

干杯，

斯科特

【问题讨论】：

你能发一个self-contained example吗？你的想法听起来很有效，但听起来你被实施绊倒了。

标签： jquery jscrollpane dynamic-content

【解决方案1】：

感谢我找到的答案here，我已经编写了一个可接受的解决方法。

唯一的缺点是它需要一点 CPU 工作，但不需要不断地重新初始化。我尝试使用this resize 插件，而不是将所有内容都放在计时器上，但由于某种原因，有时我会让它重新初始化两次，这意味着在平滑的 jquery 显示动画中途，它会在滚动条重新初始化时停止一段时间。

嗯嗯。它的工作原理是这样的：

-每隔 75 毫秒检查一次窗口高度和容器高度，看它们是否有变化 -如果是这样，滚动条设置为在 100 毫秒后重新初始化 - 如果某物继续调整大小，则重新初始化命令再次重置为 100

$(document).ready(function(){

var windowHeight = $(window).height();
var containerHeight = $('#container').height();
var resized;

setInterval(function(){

    if(windowHeight!=$(window).height() || containerHeight!=$('#container').height())
    {
        clearTimeout(resized);
        resized = setTimeout(function(){api.reinitialise();}, 100);
    }

    windowHeight = $(window).height();
    containerHeight = $('#container').height();

},75);

});

【讨论】：

【解决方案2】：

我还使用了 Mark Coleman 的脚本（感谢 Mark！），它可以工作。

function resizedw() {
        $.each($('.scroll-pane'), function () {
            var api = $(this).data('jsp');
            api.reinitialise();
        });
}
var doit;
window.onresize = function () {
    clearTimeout(doit);
    doit = setTimeout(resizedw, 100);
};

【讨论】：