cssで解決！iPhoneのステータスバーをタップしても上までスクロールさせない姑息な方法
ここで紹介するデバイスの動きを止めるような事は良くないこととされています
どうしてもやるのであれば本当にやっていいのかある程度責任がある人に相談してからにしましょう
スナップスクロールを作っていたときに一番困ったステータスバーをタップしたときの動作で一番上に移動しようとするんだけどひとつ上に移動するだけで止まってしまう現象をステータスバーの動きを止める以外で解決方法が見つからない
そもそもタップするだけで一番上まで移動してくれる便利な機能だからこれを無効にしようとする人は少ないだろうし、探しても無効にする方法が見つからない
jsを使ったイベント処理とかないもんかとか探してみたけど使えそうなものは見つからず… metaタグでステータスバーを消す設定できるよ！的な情報は古いみたいで現状対応していないし、そんな事できんよ的な情報もありました。
なので無理やり対応する方法を考えてみました
body要素をスクロールできないようにする
結論なのですがTOPへ戻るよくあるスクロール系の動きはbody要素やhtml要素に対して実行するんだろうからbody要素の高さを操作してスクロールできないようにすればいいんじゃね？と思ってやってみたらうまくいきました。
とりあえずデモをおいておきます
HTMLはこんなコードにしています
body直下に全要素を囲む.wrapを配置しているところがポイント
|
1 2 3 4 5 6 7 8 9 10 |
<body> <div class="wrap"> <header class="header">header</header> <div class="block">content</div> <div class="block">content</div> <div class="block">content</div> <div class="block">content</div> <footer>footer</footer> </div> </body> |
ステータスバーの動きを無効化するため重要なのはcssで、body要素の高さを0にする必要がありますが、全要素を囲んでいる.wrapに『position: fixed;』を指定すればbody要素の高さは0になるので解決します。youtubeのサイトもbodyの高さ0だし問題ないと思われる
あとは.wrapの大きさをビューポートぴったりになるよう指定してスクロールできるようにoverflowプロパティを指定すればおしまい
cssの注意点
headerなど幅を100%に指定した要素を画面上部に固定したい場合はpositionをfixedではなく『sticky』に指定しないとスクロールバーの上に要素が被ってしまうので注意してください
抱えている問題点
以下個人の感想です
- ステータスバーをタップしたとき動かないからなんか違和感がある
- スクロールではツールバーが消えないので消す場合はユーザーが操作しないとだめなところが残ってるけど方法が見つからない
- 意識高い系の人が怒り出しそう
常にTOPへ戻るボタンを用意しておけば使い勝手は落ちにくそうではあるけれど、表示領域が常に狭くなってくるのがアレだと思う
都度ツールバー消すのめんどくさいし
