javascript - 添加跨浏览器 jscrollpane 不工作

Question

您好，我正在使用 this 更改默认滚动条，这是 fiddle在 fiddle 中，我正在写这个 <div class="scroll-pane horizontal-only"> (html 部分中的第 122 行)更改默认滚动条但是如果我写这个然后整个 div 消失。 This在使用 jscrollpane 之前显示。

这是jquery

$(function()
            {
                $('.scroll-pane').jScrollPane();
            });

js 部分的第 213 行，这是 css

/* Styles specific to this particular page */
            .scroll-pane
            {
                width: 100%;
                height: 200px;
                overflow: auto;
            }
            .horizontal-only
            {
                height: auto;
                max-height: 200px;
            }

css 部分的第 118 行

Answer 1

正如@Era 所说，jScrollpane 有一个height: 0，它没有得到父项的高度，因为选项卡在加载时隐藏。

我更改了代码，使其仅在选项卡可见后执行。

<a id="userlink" href="#tab2" data-toggle="tab">Users</a>

$('body').on('shown', '#userlink', function () {
    if(!$('.scroll-pane').hasClass('jspScrollable')) {
      $('.scroll-pane').jScrollPane();
    }
})

See fiddle