javascript - jScroll Pane 响应式布局问题

Question

希望有人能帮忙...

目前，我正在使用 jScrollpane 来处理我的项目的自定义滚动条。

布局是响应式的，并且填充 div 的内容是动态生成的。除了当我调整浏览器大小时出现一些笨拙的行为之外，一切都很顺利。我正在使用 autoReintialise 来观察高度和宽度的任何变化。再说一次 - 大部分工作正常。

我的问题是，当我拖动浏览器窗口并且 div 的宽度展开时，应用了 jScroll 的任何 div 都会严重滞后。存在轻微的延迟，然后在调整大小时 catch div 的宽度 - 它根本不是真正流畅的。

我的代码位于处理动态内容的 javascript 文件内的函数内。它几乎是 jScrollpane 站点示例的直接复制:

function jscroll_refresh() {

var settings = {
    autoReinitialise: true
};
var pane = $(".scroll-pane");
pane.each(
function()
{
    $(this).jScrollPane(settings);

     var api = pane.data('jsp');
            var throttleTimeout;
            $(window).bind(
                'resize',
                function()
                {
                    if (!throttleTimeout) {
                        throttleTimeout = setTimeout(
                            function()
                            {
                                api.reinitialise();
                                throttleTimeout =null;

                            }
                        );
                    }
                }
            );
    });
}

还有人遇到过这个问题吗？对于像 jScroll 这样的插件还有其他建议吗？谢谢!

Answer 1

找到了!

这是 jScrollpane 的 css 中的内容，而不是 javascript。

.scroll-pane{width: 100% !important;height: 93%;overflow: auto;}
.jspContainer{overflow:hidden;position:relative;height:100% !important; width: 100%      !important;}
.jspPane{position:absolute;width: 100%!important;}

我认为 jScroll 试图不断计算调整大小时的宽度(以像素为单位) - 这会强制百分比，从而使我能够平滑地调整 Pane 容器的大小。不再有滞后。