jscrollbar не отображается при вызове скрытого div

У меня есть контент в скрытом div, который содержит список с вертикальной полосой прокрутки. При нажатии на ссылку div становится видимым вместе со списком и полосой прокрутки по умолчанию.

Проблема заключается в том, что jscrollpane объявлен в div, который содержит поле со списком, а не полосу прокрутки по умолчанию.

На той же странице у меня есть событие, когда размер окна браузера изменяется, jscrollpane повторно инициализируется для горизонтальной прокрутки браузера. Если размер браузера изменен, правильная jscrollpane отображается как по горизонтали, так и по вертикали.

Я пытаюсь загрузить jscrollpane, когда начальное состояние div изменяется со скрытого на видимое. Я знаю, что jscrollpane работает, потому что он срабатывает при изменении размера.

Что мне нужно сделать, чтобы заставить его работать с начальным состоянием изменения div со скрытого на видимое? Какое событие мне следует искать? Я пробовал следующее и многое другое.

$(document).onload(function () {
                 $(function () {
                     jScrollPane = $('.scroll-pane').jScrollPane({ showArrows: true, arrowScrollOnHover: true });
                 });
             });

Также

$(document).ready(function () {
                 $(function () {
                     jScrollPane = $('.scroll-pane').jScrollPane({ showArrows: true, arrowScrollOnHover: true });
                 });
             });

Код изменения размера, который исправляет все jscrollpane

               $(window).resize(function () {
                 if (this.resizeTO) clearTimeout(this.resizeTO);
                 this.resizeTO = setTimeout(function () {
                     $(this).trigger('resizeEnd');
                 }, 500);
             });

             $(window).bind('resizeEnd', function () {

                 $(function () {
                    jScrollPane = $('.scroll-pane').jScrollPane({ showArrows: true, arrowScrollOnHover: true });
                 });
                var newHeight = $(window).height();

             });

Код для отображения скрытого DIV

function showDiv(elemId, userDivId) {
var elem = document.getElementById(elemId);
var calcedPos = (window.outerWidth - mouseXpos);
var userDetailWidth = $(".UserDetail").width();
if (calcedPos >= (userDetailWidth + 100)) {
    $(elem).animate({ width: 'show' }, 210);
}

document.getElementById(elemId).style.visibility = 'visible';
document.getElementById(elemId).style.display = 'block';

$('.user-list-container').css('background-color', 'inherit');
document.getElementById(userDivId).style.backgroundColor = '#e6e6e6';

$('.spacer-container').height(100);

vph = $(window).height();
cvph = vph - 730;
$('.spacer-container').css({ 'height': cvph + 'px' });

}


person user1946891    schedule 02.05.2013    source источник


Ответы (1)


Просто измените размер окна после, когда вы сделаете div видимым.

$(window).trigger('resize');
person Gabriele Petrioli    schedule 02.05.2013
comment
Я думаю, проблема в том, что у меня нет ничего, чтобы вызвать это событие. Страница уже есть. Я попытался добавить ваш код в функцию showDiv, но я все еще не могу заставить ее запускаться. - person user1946891; 03.05.2013
comment
Событие триггера отлично работает, я использовал неправильную функцию. У меня есть 2 функции showDiv, и я использовал неправильную функцию. - person user1946891; 03.05.2013