自作できるのは嬉しい
そもそもの話
詳細はほぼ覚えてないんだけど、以前調べたときはiPhoneに効かないみたいな条件付ばっかりで、スマホに対応できんなら意味ないわっていう。
グローバルナビを設置するにはスマホのデザインだと狭すぎるのでアイコンをタップしたら表示みたいなのがよくある。それは普通にスライドさせて表示させたり、ページの上のレイヤーに固定表示したりで様々ある。
それだけの認識でもって好みのデザインを採用すればいいんだけど、ナビゲーション項目が多くて画面をぶち抜いた場合はどうすんのって話になる。position:fixed;とかで固定表示すると表示領域というか要素の高さが限られるんで、入れ子を噛ませてoverflow-y:auto;とかでスクロールできるようにしましょうねって対策を取る。それもまあ想定内。
oveflowで要素内のスクロールができました、良かったねで済まない。
ページ自体のスクロールのことがある。
ナビのスクロールが終わったらページ側のスクロールが始まるみたいな、二重構造だからしょうがないけど操作としては望まれていない動作がある。
だから、特定のコンテンツだけをスクロールする（＝ページ自体をスクロールしない）状態がひつようになる。
で、それは調べ方が悪かったのもあるかもしれないけど、スマホで実現したいのにスマホが除外されるっていう本末転倒な話がありましたよっていうね。
参考
メチャクチャ簡単だった。
方法
今までになく感動したので引用は放棄します。
URLに飛んで確認して下さい。
classとかidでもってギミックを用意してjsで付与タイミングを操作したら完了。
最後に
調べてた当時はスクロール禁止はjsでどうのこうのみたいなのが多かったんです。手間がかかる上に条件付きってなんだよって話で。自分の無知もあるけど出来合モノのプラグインじゃないと結局導入できなかった。
それがCSSだけで実現できたってのが本当に嬉しい。
めっちゃスマート。
レスポンシブもほぼCSSで組み上げて、jsではclassの付与だけみたいな感じに進めてたんで今回のテーマにもあってた。最高。
コメント