javascript - 使用动态内容平滑 jScrollPane 滚动条长度调整

标签 javascript jquery html css jquery-jscrollpane

我的一些网页包含几个文本元素,这些元素可以通过 jQuery“ Accordion ”效果展开和折叠:

function show_panel(num) {
    jQuery('div.panel').hide();
    jQuery('#a' + num).slideToggle("slow");
}

function hide_panel(num) {
    jQuery('div.panel').show();
    jQuery('#a' + num).slideToggle("slow");
}

这会导致窗口大小改变,因此必须重新初始化 jScrollPane,这也会改变滚动条的长度。为了实现滚动条的平滑长度调整,我将“autoReinitialise”选项设置为“true”并将“autoReinitialiseDelay”设置为“40”ms:

$(document).ready(function () {
var win = $(window);
// Full body scroll
var isResizing = false;
win.bind(
    'resize',

function () {
    if (!isResizing) {
        isResizing = true;
        var container = $('#content');
        // Temporarily make the container tiny so it doesn't influence the
        // calculation of the size of the document
        container.css({
            'width': 1,
                'height': 1
        });
        // Now make it the size of the window...
        container.css({
            'width': win.width(),
                'height': win.height()
        });
        isResizing = false;
        container.jScrollPane({
            showArrows: false,
            autoReinitialise: true,
            autoReinitialiseDelay: 40
        });
    }
}).trigger('resize');

// Workaround for known Opera issue which breaks demo (see
// http://jscrollpane.kelvinluck.com/known_issues.html#opera-scrollbar )
$('body').css('overflow', 'hidden');

// IE calculates the width incorrectly first time round (it
// doesn't count the space used by the native scrollbar) so
// we re-trigger if necessary.
if ($('#content').width() != win.width()) {
    win.trigger('resize');
}

});

效果还可以,但是CPU使用率非常高,这让我的粉丝疯狂。

这是一个显示设置和效果的 jsfiddle:http://jsfiddle.net/VVxVz/

这是一个示例页面(实际上它是所示网页中的一个 iframe):http://www.sicily-cottage.net/zagaraenausfluege.htm

是否有可能在不使用“autoReinitialise”选项的情况下实现滚动条长度的相同“平滑”过渡,也许使用额外的脚本,对 jscrollpane.js 进行一些修改,或者只是滚动条的 css 动画和然后手动调用重新初始化?

我对 javascript 毫无用处,因此非常感谢任何帮助。

最佳答案

每次调整窗口大小时,无需在您的内容上初始化 jScrollPane。您应该只执行一次 - 在 $(document).ready() 上。此外,如果您的内容是静态的,则无需使用 autoReinitialize。您应该重新初始化 jScrollPane 以仅在您 slideUp/slideDown 容器之一或 window.resize 上更新滚动条大小。所以,code变得越来越漂亮:)

function togglePanel(num) {
    var jsp = $('#content').data('jsp');
    jQuery('#a' + num).slideToggle({
        "duration": "slow",
        "step": function(){
            jsp.reinitialise();
        }
    });
    return false;
}

$(document).ready(function () {

    var container = $('#content').jScrollPane({
        showArrows: false,
        autoReinitialise: false
    });
    var jsp = container.data('jsp');

    $(window).on('resize', function(){
        jsp.reinitialise();
    });

    // Workaround for known Opera issue which breaks demo (see
    // http://jscrollpane.kelvinluck.com/known_issues.html#opera-scrollbar )
    $('body').css('overflow', 'hidden');

    // IE calculates the width incorrectly first time round (it
    // doesn't count the space used by the native scrollbar) so
    // we re-trigger if necessary.
    if (container.width() != $(window).width()) {
        jsp.reinitialise();
    }

});

关于javascript - 使用动态内容平滑 jScrollPane 滚动条长度调整,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22621390/

相关文章:

javascript - 单击边框时,将单击事件绑定(bind)到 jquery 移动按钮不起作用

具有多个嵌套元素的 jQuery slideToggle

html - DIV 和图像在 Safari 中不显示,在 Chrome 和 Firefox 中正常

javascript - 通过选中复选框切换禁用字段集

javascript - gulpfile.js - 任务不在 gulp 文件中错误

javascript - jQuery JSON 解析 - 对象元素

javascript - AngularJS - 从 openDatabase 获取数据

javascript 上下文问题 - 参数未定义

jquery - 在 Facebook 应用程序上发送多个请求

javascript - 在本地存储中添加新对象会覆盖旧对象