jQuery Scrollify在数据角色内

Question

我正在使用jquerymobile创建一个基本的phonegap应用。

我的index.html中有2个数据角色，并滚动浏览下一个和上一个导航设置。我只想让scrollify在每个数据角色中滚动，而我却无法锻炼该如何做。这是我到目前为止所拥有的

https://codepen.io/richwalker/pen/WmQgmJ

$(document).ready(function() {
  $.scrollify({
    section: "section",
    touchScroll: true
  });
  $(".next").click(function(e) {
    $.scrollify.next();
  });
  $(".prev").click(function(e) {
    $.scrollify.previous();
  });
});

<div id="arrow"><a class="prev">UP</a><a class="next">DOWN</a></div>

    

  <section><img src="https://via.placeholder.com/250" /> <a href="#bath">link to data-role=bath</a></section>
  <section><img src="https://via.placeholder.com/250" /></section>
  <section><img src="https://via.placeholder.com/250" /></section>
</div>

<div data-role="page" id="bath">
  <section><img src="https://via.placeholder.com/250" />
    <a href="#main"> link back to data-role=main</a></section>
  <section><img src="https://via.placeholder.com/250" /></section>
  <section><img src="https://via.placeholder.com/250" /></section>
  <section><img src="https://via.placeholder.com/250" /></section>
  <section><img src="https://via.placeholder.com/250" /></section>
</div>