Плавная регулировка длины полосы прокрутки jScrollPane с динамическим содержимым

Question

Плавная регулировка длины полосы прокрутки jScrollPane с динамическим содержимым

0

Некоторые мои веб-страницы содержат несколько текстовых элементов, которые расширяются и сворачиваются с помощью эффекта "аккордеона" jQuery:

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" мс:

$(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');
}

});

Эффект в порядке, но по цене очень высокой загрузки процессора, что делает мой поклонник диким.

Это jsfiddle, который показывает настройки и эффект: http://jsfiddle.net/VVxVz/

Вот пример страницы (на самом деле это iframe на веб-странице): http://www.sicily-cottage.net/zagaraenausfluege.htm

Есть ли возможность достичь такого же "плавного" перехода длины полосы прокрутки без использования опции "autoReinitialise", возможно, с дополнительным скриптом, некоторой модификацией jscrollpane.js или просто анимацией css полосы прокрутки, а затем вызовом повторно инициализировать вручную?

Я абсолютно бесполезен в javascript, поэтому любая помощь будет очень признательна.

zagara 24 март 2014, в 23:30

Источник

Теги:

javascript

jquery

html

css

jquery-jscrollpane

1 ответ

Ещё вопросы

Gromo · Accepted Answer · 2014-03-25T03-38-00.000Z

Нет необходимости инициализировать jScrollPane на вашем контенте при каждом изменении размера окна. Вы должны сделать это только один раз - на $(document).ready(). Кроме того, нет необходимости использовать autoReinitialize, если ваш контент является staic. Вы должны повторно инициализировать jScrollPane, чтобы обновить размер полосы прокрутки только тогда, когда slideUp/slideDown один из вашего контейнера или window.resize. Итак, код становится все красивее :)

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();
    }

});

Уважаемый @Gromo, большое спасибо за вашу помощь. Первый бит вашего кода работает волшебно! Я поражен такими минималистичными и эффективными решениями, я действительно должен попытаться научиться понимать сценарий. Теперь, второй бит заставляет полосу прокрутки вести себя странно ... просто проверьте ваш jsfiddle и попробуйте получить доступ к тексту # 5, пока один из других контейнеров открыт. Кроме того, я хотел бы, чтобы полоса прокрутки полностью заменила полосу прокрутки браузера по умолчанию. Поэтому я решил придерживаться первоначального сценария, предоставленного веб-сайтом jScrollPane - ......
..... который, в свою очередь, заставил полосу прокрутки "перепрыгнуть" из крайнего правого положения в желаемое положение при первом нажатии. О, чувак ... Я закончил тем, что просто приклеил ваш бит к сценарию jScrollPane, и теперь он работает нормально, но, вероятно, вам больше не понравится сценарий. Посмотрите, если хотите ... Но все равно спасибо еще раз!
NB. Странное поведение, упомянутое выше, имеет место только при публикации в iframe (как в jsfiddle), но мои веб-страницы тоже находятся в iframe.
@zagara Рад знать, что это помогает. Вы можете пометить мой ответ как правильный, он добавит мне немного репутации :). И еще одна вещь: в следующий раз, когда вам понадобится пользовательская полоса прокрутки, посмотрите на полосу прокрутки jQuery .
только что разобрался с этой "нервной" полосой прокрутки, так что я счастлив - вот твой зеленый тик!