質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
WordPress

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

Onsen UI

HTML5で記述されたモバイルアプリの高速化、およびネイティブアプリライクなUIが作れるフレームワーク。 様々なJavaScriptフレームワークと併せて使用することができます。スマートフォン向けアプリ、Webサイトに必要なアニメーション、UI/UXを実装することが可能になります。

Monaca

「Monaca」はiOS、Android、Windows向けのアプリ開発に対応した、Cordovaベースのモバイルアプリ開発プラットフォームです。HTML5、JavaScriptといったWeb標準技術を用いてモバイルアプリ開発を行うことができます。

Q&A

解決済

1回答

1599閲覧

monacaで作ったアプリが下にスクロールするとトップに戻ってしまう。

koichi0414

総合スコア14

WordPress

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

Onsen UI

HTML5で記述されたモバイルアプリの高速化、およびネイティブアプリライクなUIが作れるフレームワーク。 様々なJavaScriptフレームワークと併せて使用することができます。スマートフォン向けアプリ、Webサイトに必要なアニメーション、UI/UXを実装することが可能になります。

Monaca

「Monaca」はiOS、Android、Windows向けのアプリ開発に対応した、Cordovaベースのモバイルアプリ開発プラットフォームです。HTML5、JavaScriptといったWeb標準技術を用いてモバイルアプリ開発を行うことができます。

0グッド

0クリップ

投稿2018/02/23 05:21

現在、MonacaIDEを使ってアプリを作っています。
中身はWordpressで作ったページを載せています。
しかし、アプリのトップページにて下にスクロールすると
途中でトップに戻ってしまいます。何が原因かわからず困っております。
monaca側に原因があるのか、wordpress側での原因なのでしょうか?
下記URLがそのアプリになります。
ご教授いただければ幸いです。
https://itunes.apple.com/us/app/%E6%97%A5%E6%9C%AClifix/id1329874018?mt=8

以下がmonacaのソースコードになります。

<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="viewport-fit=cover width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> <meta http-equiv="Content-Security-Policy" content="default-src * data: gap: https://ssl.gstatic.com; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'"> <script src="components/loader.js"></script> <script src="lib/onsenui/js/onsenui.min.js"></script> <link rel="stylesheet" href="components/loader.css"> <link rel="stylesheet" href="lib/onsenui/css/onsenui.css"> <link rel="stylesheet" href="lib/onsenui/css/onsen-css-components.css"> <link rel="stylesheet" href="css/style.css"> <script> ons.ready(function() { console.log("Onsen UI is ready!"); }); window.fn = {}; window.fn.open = function() { var menu = document.getElementById('menu'); menu.open(); }; window.fn.load = function(page) { var content = document.getElementById('content'); var menu = document.getElementById('menu'); content .load(page) .then(menu.close.bind(menu)); }; </script> </head> <body> <ons-splitter> <ons-splitter-side id="menu" side="left" width="220px" collapse swipeable> <ons-navigator title="Navigator" var="myNavigator"> <ons-page> <ons-list> <ons-list-header>Nihon Lifix</ons-list-header> <ons-list-item onclick="fn.load('home.html')" tappable> Home </ons-list-item> <ons-list-item onclick="fn.load('settings.html')" tappable> Lifixの特徴&SNS </ons-list-item> <ons-list-item onclick="window.open('http://nihon-lifix.com/907-2/', '_blank','location=no,presentationstyle=fullscreen,toolbar=yes')" tappable> 自然食品へのこだわり </ons-list-item> </ons-list-item> <ons-list-item onclick="window.open('http://nihon-lifix.com/227-2/', '_blank','location=no,presentationstyle=fullscreen,toolbar=yes')" tappable> 日本Lifix 商品ご紹介 </ons-list-item> </ons-list-item> <ons-list-item onclick="window.open('http://nihon-lifix.com/366-2/', '_blank','location=no,presentationstyle=fullscreen,toolbar=yes')" tappable> 本因堂薬局 商品ご紹介 </ons-list-item> </ons-list-item> <ons-list-item onclick="window.open('http://nihon-lifix.com/', '_blank','location=no,presentationstyle=fullscreen,toolbar=yes')" tappable> 美利膳レシピ集 </ons-list-item> </ons-list-item> <ons-list-item onclick="window.open('http://nihon-lifix.com/98-2/', '_blank','location=no,presentationstyle=fullscreen,toolbar=yes')" tappable> 本因堂薬局通信 </ons-list-item> </ons-list-item> <ons-list-item onclick="window.open('http://nihon-lifix.com/184-2/', '_blank','location=no,presentationstyle=fullscreen,toolbar=yes')" tappable> 健康チェック☆ </ons-list-item> </ons-list-item> <ons-list-item onclick="window.open('https://www.rakuten.co.jp/n-lifix/', '_blank','location=no,presentationstyle=fullscreen,toolbar=yes')" tappable> 楽天ネットショップ </ons-list-item> </ons-list-item> <ons-list-item onclick="window.open('https://n-lifix.stores.jp/', '_blank','location=no,presentationstyle=fullscreen,toolbar=yes')" tappable> オンラインストア </ons-list-item> </ons-list-item> <ons-list-item onclick="window.open('http://nihon-lifix.com/39-2/', '_blank','location=no,presentationstyle=fullscreen,toolbar=yes')" tappable> 健習学館 店舗情報 </ons-list-item> </ons-list-item> <ons-list-item onclick="window.open('http://nihon-lifix.com/481-2/', '_blank','location=no,presentationstyle=fullscreen,toolbar=yes')" tappable> 本因堂薬局 店舗情報 </ons-list-item> </ons-list-item> <ons-list-item onclick="window.open('http://nihon-lifix.com/961-2/', '_blank','location=no,presentationstyle=fullscreen,toolbar=yes')" tappable> お知らせ What's New! </ons-list-item> </ons-list-item> <ons-list-item onclick="window.open('http://nihon-lifix.com/366-2/', '_blank','location=no,presentationstyle=fullscreen,toolbar=yes')" tappable> YouTube動画 </ons-list-item> </ons-list-item> <ons-list-item onclick="window.open('https://twitter.com/lifixsapuri', '_blank','location=no,presentationstyle=fullscreen,toolbar=yes')" tappable> Twitter </ons-list-item> </ons-list-item> <ons-list-item onclick="window.open('http://nihon-lifix.com/702-2/', '_blank','location=no,presentationstyle=fullscreen,toolbar=yes')" tappable> Facebook </ons-list-item> </ons-list-item> <ons-list-item onclick="window.open('https://www.instagram.com/n_lifix/', '_blank','location=no,presentationstyle=fullscreen,toolbar=yes')" tappable> Instagram </ons-list-item> </ons-list-item> <ons-list-item onclick="window.open('http://nihon-lifix.com/981-2/', '_blank','location=no,presentationstyle=fullscreen,toolbar=yes')" tappable> クーポン&特典情報 </ons-list-item> </ons-list-item> <ons-list-item onclick="window.open('http://nihon-lifix.com/58-2/', '_blank','location=no,presentationstyle=fullscreen,toolbar=yes')" tappable> このアプリについて </ons-list-item> </ons-list> </ons-page> </ons-splitter-side> <ons-splitter-content id="content" page="home.html"></ons-splitter-content> </ons-splitter> <template id="home.html"> <ons-page> <iframe src="http://nihon-lifix.com/235-2/" seamless></iframe> <ons-toolbar> <div class="left"> <ons-toolbar-button onclick="fn.open()"> <ons-icon icon="ion-navicon, material:md-menu"></ons-icon> </ons-toolbar-button> </div> <div class="center"> <img src="images/N-Lifix.png" width="120" height="30"alt="lifix" style=margin-top:12px;> </div> </ons-toolbar> </ons-page> </template>

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

現象はAndroidでしょうか? それともiOSでしょうか?
ざっとみたところ、少し気になったので、まずはそれを直してみてはいかがでしょうか?

  1. ons-list-itemの閉じタグ(</ons-list-item>)の数が多い。 ons-list-itemの開始タグ1つに対し、2つずつons-list-itemの閉じタグがあるようです。
  2. ons-navigatorの閉じタグがない。
  3. bodyタグ、htmlタグの閉じタグがない。

[追記]
少し詳しく調べてみましたが、これはiOSのUIWebViewの不具合のようです。divタグでのスクロール(overflow:scroll)を使ってしまうと、その内部のiframeの表示に問題が発生し、今回のような現象が発生するようです。
なので、解決は非常に難しいのではないかと思います。(WKWebViewを試すという方法もありますが、、、)

 代替案としてなのですが、このアプリでいうなら次のようにしてみてはいかがでしょうか?

  1. iframeを含むons-pageにidとして'home'をつけ、参照出来るようにする。
<ons-page id="home"> <iframe src="http://nihon-lifix.com/235-2/" seamless></iframe> ...
  1. scriptタグの中で、以下のコードを追加し、スクロールをbodyタグ自身の持つページ全体の

スクロール処理にまかせる。

document.addEventListener('init', function(event) { var page = event.target; if (page.matches('#home')) { document.querySelector("ons-splitter").style.position = "static"; document.querySelector("ons-splitter-side").style.position = "fixed"; document.querySelector("#home").style.position = "static"; var element = document.querySelector("#home > .page__content"); element.style.overflow = "visible"; } });

つまり、divタグのoverflow:scrollだと問題が発生するので、bodyタグにスクロールさせるようにします。そのため、ons-splitterやons-pageも大きさを任意とするため、position属性をstaticにします。
これだけだと、ons-splitter-sideもスクロールしてしまうので、こちらはposition属性をfixedで固定しています。

暫定的な対応なので、思うような動作になっていないかもしれませんが、、。

投稿2018/03/07 06:12

編集2018/03/08 09:29
KNaito

総合スコア376

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

koichi0414

2018/03/08 05:42

回答ありがとうございます。 現象はiOSで起きます。アンドロイドでは起きません。 指摘された箇所は修正しましたが、依然、症状は変わりません。 iframeの問題かとは思っているのですが。 なぜiOSではこのような現象が起きるのかわかりません。
koichi0414

2018/03/09 03:28

KNaito様 回答本当にありがとうございます。 上記の指摘通りにしたところ スクロール途中でトップに戻ってしまう現象は収まりました。 大変助かります。 感謝申し上げます。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問