jScrollpane响应式布局问题

时间:2014-04-30 22:14:03

标签: javascript jquery responsive-design jscrollpane jquery-jscrollpane

希望有人能帮忙......

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

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

我的问题是,当我拖动浏览器窗口并且div的宽度展开时,看起来任何应用了jScroll的div都会非常糟糕。有一点延迟,然后在调整大小时赶上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这样的插件的其他建议吗?谢谢!

1 个答案:

答案 0 :(得分:3)

发现它!

这是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试图不断计算调整大小时的宽度(以像素为单位) - 这会强制百分比,从而使我能够平滑调整窗格容器的大小。不会更加滞后。