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

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

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

iPadは、Appleがデザインしたタブレット型コンピュータです。iPadアプリケーションは通常Xcode IDEのObjective-Cで書かれますが、iPadアプリケーションを組むためのほかのツールを使うことも可能です。

iOS

iOSとは、Apple製のスマートフォンであるiPhoneやタブレット端末のiPadに搭載しているオペレーションシステム(OS)です。その他にもiPod touch・Apple TVにも搭載されています。

スクロール

スクロールとは、ディスプレイスクリーン上において連続的にコンテンツが滑っていくことを指します。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

1回答

1248閲覧

【Javascript】【CSS】fixedで固定したヘッダーの横スクロールの挙動がiPadだと違う

shiratama215

総合スコア5

iPad

iPadは、Appleがデザインしたタブレット型コンピュータです。iPadアプリケーションは通常Xcode IDEのObjective-Cで書かれますが、iPadアプリケーションを組むためのほかのツールを使うことも可能です。

iOS

iOSとは、Apple製のスマートフォンであるiPhoneやタブレット端末のiPadに搭載しているオペレーションシステム(OS)です。その他にもiPod touch・Apple TVにも搭載されています。

スクロール

スクロールとは、ディスプレイスクリーン上において連続的にコンテンツが滑っていくことを指します。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

2クリップ

投稿2020/01/25 10:29

編集2022/01/12 10:55

前提・実現したいこと

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/ツールのバージョンなど)

ここにより詳細な情報を記載してください。

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

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

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

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

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

guest

回答1

0

このようなコードはいかがでしょうか。

html

1<html> 2 <body> 3 <div id="headercontainer"> 4 <div id="header"></div> 5 <div> 6 </body> 7</html>

css

1body{ 2 margin:0px; 3} 4#headercontainer{ 5 position:fixed; 6 top:0px; 7 left:0px; 8 width:100vw; 9 height:50px; 10 overflow:auto; 11} 12 13#header{ 14 width:2000px; 15 height:100%; 16 background-color:red; 17}

Demo

追記

  • スクロールバーのデザインはCSSで変更できます。
  • JavaScriptは使用していません。

投稿2020/01/27 12:05

編集2020/01/27 12:13
yuyuyu88180708

総合スコア26

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

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

yuyuyu88180708

2020/01/27 12:05

JavaScriptは使用していません。
shiratama215

2020/01/27 12:31

ご回答ありがとうございます! いただいたコードで試したところ、ヘッダーそのものに独立した横スクロールバーが発生してしまいました。 実現したいことは、ページ全体の横スクロールに追従して、ヘッダーも左右にスクロールできるようにしたいのです。 せっかくご提案いただいたのに申し訳ありません。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問