monaca Onsen UI 初心者です。<ons-scroller>が機能しません

こんにちは。monaca Onsen UI 初心者です。
<ons-scroller>を試してみようとして、

html
1<!DOCTYPE HTML>
2<html>
3<head>
4    <meta charset="utf-8">
5    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
6    <meta http-equiv="Content-Security-Policy" content="default-src * data:; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'">
7    <script src="components/loader.js"></script>
8    <script src="lib/onsenui/js/onsenui.min.js"></script>
9
10    <link rel="stylesheet" href="components/loader.css">
11    <link rel="stylesheet" href="lib/onsenui/css/onsenui.css">
12    <link rel="stylesheet" href="lib/onsenui/css/onsen-css-components.css">
13    <link rel="stylesheet" href="css/style.css">
14
15    <script>
16        ons.ready(function() {
17            console.log("Onsen UI is ready!");
18        });
19    </script>
20</head>
21<body>
22<ons-scroller style="height:100px; width:100%;">
23<p>a</p>
24<p>a</p>
25<p>a</p>
26<p>a</p>
27<p>a</p>
28<p>a</p>
29<p>a</p>
30<p>a</p>
31<p>a</p>
32<p>a</p>
33<p>a</p>
34<p>a</p>
35<p>a</p>
36<p>a</p>
37<p>a</p>
38<p>a</p>
39<p>a</p>
40<p>a</p>
41<p>a</p>
42<p>a</p>
43</ons-scroller>
44</body>
45</html>

と記述してみましたが、高さ100px内でスクロールしてくれません。
困っています。アドバイスお願いします。

行動規範の内容に同意します

回答3件

すみません、見るドキュメントを間違えていたようです。
現在のバージョンはVer.2なのにVer.1のガイドを見ていました。
https://ja.onsen.io/v2/docs/angular1.html
を見るべきところ、
https://ja.onsen.io/v1/reference/javascript.html
を見ていました。
https://ja.onsen.io/v1/reference/ons-scroller.html
の議論をしっかり読むと、ons-scrollerは廃止されたようですね。

投稿2017/04/02 07:00

idic

総合スコア20

最近MonacaクラウドIDEを使い始めましたが、同じところではまりました。
ここの回答を見て、JS、CSSのバージョンを色々試してみたところ、onsenui.cssを上記の外部ファイル参照に変えると動きました。

設定画面からOnsenUIのバージョンを上げたり落としたりしてみました。
すべては試していませんが2.0.0-beta.7までは問題なく2.0.0-rc.1から駄目な気がします。

投稿2017/03/26 12:30

idic

総合スコア20

ベストアンサー

特に問題なく動くようでした。

以下に動くサンプルを作りました
ons-scrollerサンプルのリンク

html
1<html>
2  <head>
3    <script src="https://cdnjs.cloudflare.com/ajax/libs/onsen/2.0.0-alpha.15/js/onsenui.min.js"></script>
4    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/onsen/2.0.0-alpha.15/css/onsenui.min.css" />
5    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/onsen/2.0.0-alpha.15/css/onsen-css-components.min.css" />
6    <script>
7        ons.bootstrap();
8    </script>
9  </head>
10  <body>
11    <ons-scroller style="height:100px; width:100%;">
12      <p>a1</p>
13      <p>a2</p>
14      <p>a3</p>
15      <p>a4</p>
16      <p>a5</p>
17      <p>a6</p>
18      <p>a7</p>
19      <p>a8</p>
20      <p>a9</p>
21      <p>a10</p>
22      <p>a11</p>
23      <p>a12</p>
24      <p>a13</p>
25      <p>a14</p>
26      <p>a15</p>
27      <p>a16</p>
28      <p>a17</p>
29      <p>a18</p>
30      <p>a19</p>
31      <p>a20</p>
32    </ons-scroller>
33  </body>
34</html>