调用隐藏的div时,jscrollbar不会显示

时间:2013-05-02 16:09:32

标签: javascript javascript-events jquery-jscrollpane

我在隐藏的div中有内容,其中包含带有垂直滚动条的列表框。单击链接后,div将与列表框和默认滚动条一起显示。

挑战在于jscrollpane是在包含列表框而不是默认滚动条的div上声明的。

在同一页面中,我有一个事件,如果浏览器窗口被重新调整大小,则jscrollpane将重新初始化为浏览器水平滚动。如果浏览器重新调整大小,则会显示水平和垂直的正确jscrollpane。

我正在尝试在初始div状态从隐藏状态更改为可见状态时加载jscrollpane。我知道jscrollpane有效,因为它会触发重新调整大小。

我需要做些什么才能使div在隐藏到可见的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' });

}

1 个答案:

答案 0 :(得分:0)

只需在 之后向窗口 发出调整大小即可div可见..

$(window).trigger('resize');