とあるweb屋の仕事術

10年以上現役のweb製作屋さん。web製作雑務全部やる。

overflow-x:scroll で横スクロールはさせたいけどスクロールバーを出したくない場合の対処法

overflow-x:scroll で横スクロールはさせたいけどスクロールバーを出したくない場合の対処法



スマホサイトでは

スワイプして横スクロールで

コンテンツを見せたり、

ナビゲーション操作させたりと

横スクロールは省スペースで

コンテンツを展開するUIとして

優秀なUIです。

 

横スクロールの実装は、

CSSで簡単にできます。

 

overflow-x:scroll;

 

ですね。詳しくは下記のサイトを

ご覧ください。

saruwakakun.com

さて「overflow-x:scroll」にしたときに

問題になるのが、PCでのスクロールバーです。

 

mac OS であればスクロールバーが

初期設定では非表示になるので、

デザイン上とくに違和感がありませんが、

windowsはスクロールバーが露骨にでます。

 

「overflow-x:scroll」をかけると、

Windowsではどのブラウザでも

このようにスクロールバーがでます。

 

Windowsで例を見てみましょう。

AppleのWebサイトを

ブラウザ幅を縮めて見ると、

ナビゲーションが横スクロール

できるようになります。

 

ではここで少し小細工を。

Appleはスクロールバーが

でない状態で横スクロールが

できるように実装上で

ある工夫がされています。

 

いったんその工夫された実装を

とってみてみましょう。

こんなかんじです。

 

ナビゲーションでスクロールバーがでてしまう例

ナビゲーションでスクロールバーがでてしまう例

 

スクロールバーがでました。

 

Appleはとある手法を使って、

「overflow-x:scroll」を使いながら

Windowsでスクロールバーを表示しない

という実装をしています。

 

その実装方法とは、

なんとめちゃくちゃ単純。

 

スクロールバーの部分を隠しちゃおう

ということなんです。

 

隠す方法はまずナビゲーションの

横スクロールする要素(子要素)に、

親要素を作ります。

親要素に「overflow-y:hidden」をかけて

はみだす部分を見えないようにします。

 

その見えない部分に子要素の

スクロールバーを追いやるのです。

 

具体的には子要素に

padding-bottomで49pxをかけて

外に追いやっています。

 

子要素のスクロールバーを外に追いやっている

子要素のスクロールバーを外に追いやっている

 

これはめちゃくちゃかしこいですね。

簡単すぎて盲点でした。

 

以上、

「overflow-x:scroll」で横スクロールさせたいけど、

スクロールバーを出したくない場合の対処法は、

スクロールバーを親要素の外に追い出す、でした。