実機でしか起きず困っています。
iOSではiframe内のボックス要素のスクロール値は取得・設定できないのでしょうか?
###前提・実現したいこと
作成中の個人用スマホサイトで、iframeを使って別ページの内容を表示しています。
この際、iframe内でbox要素にoverflow:scroll を設定しています。
(新着一覧リストが縦に並んでいて、それを囲むdiv要素が高さ固定)
- index.html (読み込み元)
- news.html (iframe内で読み込むファイル)
- news.js (news.html内で読み込んでいるファイル)
ここで、TOP画面で「下へ」というボタンをクリックしたらdiv#newsareaを固定値だけスクロールさせるのが目的です。
###発生している問題・エラーメッセージ
iphoneSE(最新アップデート済)でこの表示を行った際、jqeuryでscrollTop()によりdiv#newsareaのスクロール値を取得する部分で0が返ってきてしまいます。
また、scrollTopで値を入れる部分で、何を設定してもスクロール値0に移動してしまいます。
他の個所が影響しているのかとあちこち削ってみましたが、最小まで削っても取得は0のままでした。
###該当のソースコード
index.html
HTML
1<html> 2<head></head> 3<body> 4 <h1>TOP</h1> 5<!-- 略 --> 6 <iframe src="news.html" width="100%" height="100%" style="width:100% "></iframe> 7<!-- 略 --> 8</body> 9</html>
news.html
lang
1<html> 2<head> 3 <script type="text/javascript" src="jquery-1.9.0.min.js"></script> 4 <script type="text/javascript" src="news.js"></script> 5</head> 6<body> 7 <h2>NEWS</h2> 8<!-- 略 --> 9 <div id="newsarea" style="height:200px;overflow:hidden;"> 10 <ul> 11 <li>・ 2017/XX/XX 〇〇〇〇〇〇〇〇〇〇</li> 12 <li>・ 2017/XX/XX 〇〇〇〇〇〇〇〇〇〇</li> 13 /* 中略 */ 14 <li>・ 2017/XX/XX 〇〇〇〇〇〇〇〇〇〇</li> 15 <li>・ 2017/XX/XX 〇〇〇〇〇〇〇〇〇〇</li> 16 </ul> 17 </div> 18 <button id="btn" value="下へ"> 19<!-- 略 --> 20</body> 21</html>
news.js
Javascript
1$(function() { 2 $('#btn').click(function() { 3 var posY = $('#newsarea').scrollTop(); // 取得値がおかしい 4 $('#newsarea').scrollTop( posY+200 ); // どんな値でも設定すると必ず0に移動 5 }); 6});
###試した環境
WindowsのChrome最新版では動きました。
iPhoneSE 最新で動きませんでした。
あなたの回答
tips
プレビュー