Q&A
当方初学者で、下記の実装に苦戦しております。。
実現したいこと
スマホのブラウザアプリで通常は上下にスクロールすると表示/非表示されるようなアドレスバー、メニューバーを強制的に常時表示させたい。
前提
GSAPのScrollTrigger.jsを使用して、縦スクロール操作することで横スクロール動作するサイトを構築中。
スマホのブラウザで表示させると、アドレスバー、メニューバーの表示・非表示でトリガーの位置が変化してしまい、それに伴い横スクロール領域の表示が乱れてしまう。
試したこと
アドレスバー、メニューバーの常時表示が実装されているサイトを調べ、下記2つのサイトが見つかった。
下記サイトの中から該当のコードを探そうとしたが、見つけられなかった。
回答1件
0
ベストアンサー
budgerigar.kさんが提示してくださったサイトを見たところ、CSSを使ってメニューバーの常時表示を実装しているようです。厳密な検証はできていませんが、それらのサイトを参考に私の手元でも同様の機能を実装できましたので、その方法を記載します。
説明
メニューバーが隠れる現象は画面をスクロールするときに発生します。そして、画面がスクロールする条件は、ページが画面からはみ出る、つまり「<body>が画面内からはみ出る」です。ということは、<body>の大きさを画面内に収まるように固定してしまえばよいわけです。
コード
html
1<body> 2 <div id="container"> 3 <p>テキストテキストテキスト</p> 4 <p>テキストテキストテキスト</p> 5 ... 6 <p>テキストテキストテキスト</p> 7 </div> 8</body>
css
1body{ 2 height: 100vh; 3 overflow-y: hidden; 4 margin: 0px; 5} 6#container{ 7 height: 100%; 8 overflow-y: scroll; 9 margin: 0 1px; 10}
まず、<body>要素の大きさを固定します。
height: 100vh;を指定して、高さを画面全体に合わせます。
なお、vhは画面の縦幅に対する割合を表します。100vhで縦幅全体になります。overflow-y: hidden;を指定して、要素からはみ出た部分が隠れるようにします。
こうすることで、<body>要素が画面内に収まるようになり、スクロールが発生しなくなります。
しかし、このままだと<body>の先頭しか表示されず、ページ全体を見ることができません。
そこで、<body>の中にコンテナ<div>を設置し、これをスクロールできるようにします。
height: 100%を指定して、コンテナの高さを<body>に合わせます。overflow-y: scroll;を指定して、要素からはみ出た部分をスクロールで見られるようにします。- (
margin: 0px;だと上手く動作しなかったため、margin: 0 1px;を入れています。コンテナの上/左/右のいずれかに余白を入れれば動作するようです。)
補足
私の環境では上手く動作しましたが、他の環境では動作しない可能性もあるのでご了承ください。
動作を確認できる簡単なサイトを作りましたので、よければこちらも確認してみてください。
投稿2023/05/28 13:09
編集2023/05/29 23:05
総合スコア492
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2023/05/29 13:16
2023/05/29 23:07
2023/05/30 10:06