ons-tabbarを固定せずにスクロールさせたい

実現させたい事

プラットフォームはMonaca（テンプレート：OnsenUI JS V2 Tabbar）を使用しています。

first pageをスクロールした際、上部にあるtabbarもスクロールするようにしたいです。

該当のソースコード

HTML
1<script>
2    document.addEventListener('init', function(event) {
3      var page = event.target;
4      if (page.matches('#first-page')) {
5        
6        var code = [];
7        for(var i = 0; i <= 100; i++){
8          code.push(
9            '<li class="list-item"><div class="list-item__center">Item' + i + '</div></li>' 
10          );
11        }
12        document.getElementById('list01').insertAdjacentHTML('afterbegin', code.join(''));
13      } 
14    });
15
16  </script>
17</head>
18<body>
19  <ons-page>
20
21    <ons-tabbar position="top">
22      <ons-tab label="Tab 1" page="tab1.html" active>
23      </ons-tab>
24      <ons-tab label="Tab 2" page="tab2.html">
25      </ons-tab>
26    </ons-tabbar>
27  </ons-page>
28
29  <ons-template id="tab1.html">
30    <ons-page id="first-page">
31      <p style="text-align: center;">
32        This is the first page.
33      </p>
34      
35      <ul class="list" id="list01"></ul>
36    </ons-page>
37  </ons-template>
38
39  <ons-template id="tab2.html">
40    <ons-page id="second-page">
41      <p style="text-align: center;">
42        This is the second page.
43      </p>
44    </ons-page>
45  </ons-template>
46</body>
47</html>