ons-modal内でスクロールできない

前提・実現したいこと

Onsen Ui v2.8.2(+jQuery 1.8.3)にてwebシステムを開発しています。
ons-modalで情報量がモーダルウィンドウの高さを超えた場合にスクロール可能にしたいのですが
iPhoneとAndroidの場合スクロールできません。
PCのwebブラウザでは問題なくスクロールします。

NG
iPhone6(iOS11.2.1)のsafari
GalaxyS6(Android7.0) の標準ブラウザ

OK
mac safari
mac chrome

ons-modal内に<ons-page>を内包しても同じ結果でした。
またmonacaにて同じような実装をしてアプリとして動かしていますがその場合は問題なくスクロールします。

スマホのブラウザで<ons-modal>内でスクロールさせたい場合、どうずれば良いでしょうか？

該当のソースコード

<!DOCTYPE html>
<html>
<head>
	<title>test</title>
		<meta charset="utf-8" />
  <link rel="stylesheet" href="../onsenui/css/onsenui.css">
  <link rel="stylesheet" href="../onsenui/css/onsen-css-components.css">
  <script src="../onsenui/js/onsenui.min.js"></script>
  <script src="../js/lib/jquery-1.8.3.min.js"></script>
</head>
<body>
    <ons-modal id="test">
            あああ<br />
            あああ<br />
            あああ<br />
            あああ<br />
            あああ<br />
            あああ<br />
            あああ<br />
            あああ<br />
            あああ<br />
            いいい<br />
            いいい<br />
            いいい<br />
            いいい<br />
            いいい<br />
            いいい<br />
            いいい<br />
            いいい<br />
            ううう<br />
            ううう<br />
            ううう<br />
            ううう<br />
            ううう<br />
            ううう<br />
            ううう<br />
            ううう<br />
            ううう<br />
            えええ<br />
            えええ<br />
            えええ<br />
            えええ<br />
            えええ<br />
            えええ<br />
            えええ<br />
            えええ<br />
            えええ<br />
            おおお<br />
            おおお<br />
            おおお<br />
            おおお<br />
            おおお<br />
            おおお<br />
            おおお<br />
            おおお<br />
            おおお<br />
    </ons-modal>
<script>
	window.onload=function(){
		document.getElementById("test").show();
	}
</script>
</body>
</html>

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

回答1件

自己解決

自己解決しました。

そもそもons-modal内はスクロールしない仕様になっていたので、
ons-modalをdivに分解し、<ons-page>を内包しました。

<div class="modal" id="test" style="display:none;"> <div class="modal__content"> <ons-page style="width:95%;height:97%;top:10px;border-radius:10px;margin:0 auto;padding:0;overflow-x:hidden !important;"> ああああああ </ons-page> </div> </div>

このままだと、bodyがスクロールしてしまったので、

<body style="overflow:hidden !important;position: fixed !important;"> としたところ、思い通りの動きになりました。無理やり感満載ですがご報告いたします。

参考
https://ja.onsen.io/v2/api/css.html#modal-category

投稿2018/03/20 11:15

cosh

総合スコア6