jquery-mobile - jquery mobile多页，tinyscrollbar缺少栏

Question

我尝试使用 data-role=page 将 tinyscrollbar (tinyscrollbar.js) 实现到 jquery mobile 中。在第一页上它工作得很好。但在第二页上，该栏不见了。直到我点击检查元素。我尝试了 tinyscrollbar_update()、update(0)、slideToggle().promise()... 无效。他们都给了我不同类型的错误。

看起来像这样

<div class="scrollbar1">
 <div class="scrollbar" style="height: 200px;">
     <div class="track" style="height: 200px;">
         <div class="thumb" style="top: 0px; height: 32.6530612244898px;">
             <div class="end"></div>
         </div>
     </div>
 </div>
 <div class="viewport">
     <div class="overview">//text</div>
 </div>

<div id="footerNavigation">
    <a href="#" data-rel="back" data-role="button" data-mini="true" data-inline="true" data-theme="b">Back</a>
    <a href="#theNextPage" data-role="button" data-mini="true" data-inline="true" data-theme="b">Next</a>
</div>

我将与上面完全相同的代码复制到我的第二页代码中：

<div id="theNextPage" data-role="page"><!--scrollbar code--></div>

和我的 javascript 文件：

$(document).ready(function() {
    $('.scrollbar1').tinyscrollbar();
});

有人知道这是怎么回事吗？有什么办法解决吗？

Answer 1

我发现了！

将类更改为id。类="scrollbar1" >> id="scrollbar1"

下一页：class="scrollbar2" >> id="scrollbar2"

$(document).ready(function() {
                $('#scrollbar1').tinyscrollbar();
                $('#scrollbar2').tinyscrollbar();
});


$(document).on("pageshow", "#theNextPage", function () {
    var $scrollbar2 = $('#scrollbar2');
    $scrollbar2.tinyscrollbar();
    var scrollbar1 = $scrollbar2.data("plugin_tinyscrollbar")
    $scrollbar2.update(0);
});

这样会更好