Question

我最近开始在一个小项目上试验jQuery mobile并遇到了问题。我是一个使用这个框架的新手，非常感谢你提供的任何建议

导致问题的问题是自定义滚动条 http://manos.malihu.gr/jquery-custom-content-scroller/

这个想法是，当单击一个菜单项时，它会触发包含自定义滚动条的面板中的幻灯片。问题是，当我第一次加载网站时，滚动条显示正常。如果我然后导航到另一个页面并返回到第一页，则滚动条似乎已重复。如果我再次重复这个过程，那么它会出现第三次和第四次。

这个问题似乎只发生在正在使用AJAX加载的桌面上。它只发生在“第一”页面上。理想情况下，如果可以，我想保持AJAX加载，但这似乎是问题的根源，因为在链接上使用rel =“”external“似乎可以解决问题。显然，这会强制页面重新加载，我想尽可能避免

<!DOCTYPE html>
<html>
<head>

//containing Jquery mobile js and css as well as bootstrap and a few smaller extras

</head>   

<body>

<div data-role="page" class="padded-bottom" id="member-page">

//slide in panels are included here

<div data-role="header" class="top-bar">

//contains the menu

</div><!-- /header -->

<section data-role="content" class="mid" style="height:auto;">

//page content

</section>

//footer content

<script>

$(".content-scrollbar").mCustomScrollbar({
advanced:{updateOnContentResize:true}
}); 

</script>

//other minor footer scripts

</div><!-- page -->

</body>
</html>`

这是我的“第一页”的基本布局。然而，网站上的后续页面布局已经足够相同，这就是我认为我可能会出错的地方。当我离开“第一个”页面并返回那里时，加载微调器不再显示，假设页面可能已经以某种方式缓存，我不确定，但是问题发生的时候。

对不起，如果我已经漫步，但我真的很感激这方面的一些建议，它让我疯了，我很想找到它。感谢

Answer 1

请尝试：

$(".content-scrollbar").mCustomScrollbar("update");

在ajax之后更新ui

或者

$（ “内容滚动条 ”）mCustomScrollbar（“ 破坏”）;

在初始化插件之前

我希望我能帮助

修改1

if($(".mCustomScrollbar").length > 0){
    $(".content-scrollbar").mCustomScrollbar("destroy");
}


$(".content-scrollbar").mCustomScrollbar({
    advanced:{updateOnContentResize:true}
});

JQuery Mobile - 脚本在页面上重复

1 个答案: