调用隐藏的 div 时，jscrollbar 不显示

Question

我在一个隐藏的 div 中有内容，该 div 包含一个带有垂直滚动条的列表框。单击链接时，div 与列表框和默认滚动条一起可见。

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

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

我正在尝试在初始 div 状态从隐藏更改为可见时加载 jscrollpane。我知道 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' });

}

Answer 1

只需在 使 div 可见之后调整窗口大小..

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