最近スマートフォンで横スクロールを導入しました。スマートフォンの表示の時には右上にバーガーボタンをおいているのですが、これじゃわからない人が多くいると思ってバーガーボタンはそのままおきつつ、横スクロールでもう少しわかりやすくなるようにしました。
いや意外とこれが結構簡単でした。
一応ソースコードもコピペ出来るようにしておりますので、ぜひみなさんも横スクロールを導入してみてください。今は横スクロールで見せる時代ですよ！
スマートフォンで横スクロールを導入する！
まずはJavascriptを導入
jqueryとiscrollというJavascriptをいれます。導入のコードはこちら
|
1 2 |
<script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="iscroll.js"></script> |
僕の場合はJqueryはヘッダーにいれて、iscrollはフッターに入れました。本当はどちらもフッターに入れたいのですが、Jqueryは上の方にないと出来ないJavascriptとかもあるので・・・
そして以下のJavascriptも入れました。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<style type='text/css'>img#wpstats{display:none}</style><script type="text/javascript"> $(document).ready(function () { var element = $(".scroll_x")[0]; var scroll_x = new iScroll(element, { // 慣性スクロール禁止 bounce: false, // スクロール領域からの画面全体の縦スクロールを有効に onBeforeScrollStart: function(){} }); }); </script> |
ここまででほとんど準備は完成です。
あとはスクロールしたいメニューを入れます。
webledgeの場合は以下のようなメニューを横スクロールに指定しています。
|
1 2 3 4 5 6 7 8 9 10 11 |
<div class="scroll_x pcnone"> <ul class="imp"> <li class="navli"><a href="https://webledge-blog.com/category/wordpress/">wordpress</a></li> <li class="navli"><a href="https://webledge-blog.com/category/camera/">カメラ</a></li> <li class="navli"><a href="https://webledge-blog.com/category/date-plan/">デート</a></li> <li class="navli"><a href="https://webledge-blog.com/category/diary/">日常</a></li> <li class="navli"><a href="https://webledge-blog.com/category/seo/">SEO</a></li> <li class="navli"><a href="https://webledge-blog.com/category/web/">Web</a></li> <li class="navli-last"><a href="https://webledge-blog.com/category/convenient-service/">便利サービス</a></li> </ul> </div> |
tableなどでも横スクロールは実現出来るのですが、たいていはメニューで実現するのが多いかなと思ってlistに反映させました。横スクロールを実現する範囲としてはscroll_xという部分が指定されます。
ちなみに、divの要素のclassにpcnoneというのをいれていますが、これはCSSでpcのときだけdisplay:none;にするためにつけているものです。（以下のCSSには含めていないです。）
CSSは下のような感じにしています。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
.navli{ display:inline-block; float:left; padding: 0px 10px; margin: 5px 0;color:#000!important; border-right:1px dotted #ccc; } .navli-last{ display:inline-block; float:left; padding: 0px 10px; margin: 5px 0;color:#000!important; } .navli a{ color:#000!important; text-decoration:none; } .navli-last a{ color:#000!important; text-decoration:none; } /* 要素からの相対位置 */ .scroll_x { position: relative; padding: 2px 0 5px; border-top: 1px solid #000; border-bottom: 1px solid #ddd; } |
という感じ。リストの要素はdisplay:inline-block;を聞かせてfloat:left;で左によせられるようにしております。
ただ、inline-blockは変な隙間が出来てしまう事があるので、その隙間を消したい人は以下の記事を参考にしてください。→inline-blockの隙間をなくす方法
まとめ
最近スマートフォンファーストなサイトが主流になってきて、それと同時に横スクロールのメニューを導入するサイトも多くなってきました。
バーガーボタンって確かに見にくいですからね・・・・今後はやはり横スクロールのメニューというものが主流になってくるきがします。
出遅れないように、サイトの変更をしておきましょうね！
