前提・実現したいこと
Fixedで固定したヘッダーを、iOS(iPad)でページ全体と一緒に横スクロールできるようにしたい
発生している問題・エラーメッセージ
Webページのヘッダーをcssのfixedで固定しました。
当然それにより横方向のスクロールも固定されてしまいます。
ページの横幅の最小値を1000pxに指定しているので、それ以下のウィンドウサイズで閲覧したときに
ヘッダーが右にはみ出て表示されず横スクロールもできません。
これを解消するためにJavascriptで、右方向にスクロールされた分だけヘッダーを左方向にずらすようにしました。
これによりPCでは思い通りに動作したのですが、iPad(Safari、Chrome)で閲覧したところ
ヘッダーの初期位置は問題ないのですが
ページそのものを拡大してから右にスクロールしていった際、スクロールされた値の判定?が本来より大きくなっているのか、
ヘッダーが左に動きすぎて最終的に見切れてしまいます。
Javascriptに関しては勉強不足で付け焼刃的に使ってしまっているのですが、
解決方法がありましたら教えていただけないでしょうか。
よろしくお願いします。
該当のソースコード
コピペで再現できるように丸々作ったものを置きます
[CSS]
body{
margin:0px;
padding:0px;
}
.header_container {
position:fixed;
width:100%;
min-width:1000px;
height:100px;
background:red;
}
.header {
margin-right:auto;
margin-left:auto;
width:1000px;
min-width:1000px; /* これも入れないとscriptが動かない */
height:100%;
background:blue;
}
.backspace{ /* ヘッダーの背後に置く空白です */
height:100px;
}
.point { /* 文字の位置を示すための右寄せです */
text-align:right;
font-size:20pt;
color:orange;
}
.box_container { /* ページ本体(ヘッダー以下)の横1000px以上時の余白です */
width:100%;
height:1000px;
background:red;
}
.box { /* ページ本体部分です */
margin-right:auto;
margin-left:auto;
width:1000px;
min-width:1000px;
height:900px;
background:white;
}
[HTML]
<body> <div class="header_container"> <div class="header"> <div class="point">端</div> </div> </div> <div class="box_container"> <div class="backspace"></div> <div class="box"> テスト<br<br><br><br><div class="point">テスト</div><br<br><br><br>テスト<br<br><br><br>テスト </div> </div> </body>[javascript]
window.addEventListener('scroll', Scroll, false);
function Scroll() {
document.getElementById("header_container").style.left = -window.scrollX + "px";
}
試したこと
Javascriptなしだとヘッダーは横スクロールできず固定されたままです。
Javascriptありだと画面サイズが1000pxを下回った時に、ページ全体の横スクロールに合わせてヘッダーも動きます。
ただiOSだとうまく動かないのです。(ヘッダーの移動がスクロール値に対して動きすぎる)
補足情報(FW/ツールのバージョンなど)
ここにより詳細な情報を記載してください。
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2020/01/27 12:05
2020/01/27 12:31