横スクロールバーを多様したデザインのコーディングをする機会があったので、どうせならマウスホイールで横スクロールできたほうが使いやすいかなぁと思って実装したときの備忘録です。
横スクロールの実装には「jQuery mousewheel」を使用しました。
横スクロールについて調べると、ほとんどがページ全体（body）を紙芝居のように横にスクロールさせるやり方でしたが、自分がやりたかったのはリスト（ul・li）の横スクロールだったので、いろいろ参考にさせてもらいながら作りました。
「jQuery mousewheel」プラグインの準備
まずは以下のページから「jQuery mousewheel」プラグインをダウンロードして、ヘッダ内に読み込みます。
https://github.com/jquery/jquery-mousewheel
※jQueryなので、もちろん別途「jquery.js」の読み込みも必要です。
マウスホイールで横スクロール処理の実装方法
htmlのコード例：横スクロールさせたいリスト（ul・li）
このリストがブラウザの横幅より短いと当然ですが横スクロールは発生しません。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | <ul class="horizontal-scroll"> <li>リスト1</li> <li>リスト2</li> <li>リスト3</li> <li>リスト4</li> <li>リスト5</li> <li>リスト6</li> <li>リスト7</li> <li>リスト8</li> <li>リスト9</li> <li>リスト10</li> <li>リスト11</li> <li>リスト12</li> <li>リスト13</li> <li>リスト14</li> <li>リスト15</li> </ul> |
横スクロールの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 30 31 | <style> /* 横スクロールのcss */ .horizontal-scroll { display: flex; overflow-x: scroll; padding: 1rem; } .horizontal-scroll > li { display: inline-block; margin: 5px; } /* スクロールバーのカスタマイズ */ .horizontal-scroll::-webkit-scrollbar { width: 6px; } .horizontal-scroll::-webkit-scrollbar:horizontal { height: 6px; } .horizontal-scroll::-webkit-scrollbar-track { background-color: #c1c1c1; border-left: solid 1px #c1c1c1; } .horizontal-scroll::-webkit-scrollbar-thumb { background-color: #e62410; } .horizontal-scroll::-webkit-scrollbar-thumb:horizontal { background-color: #e62410; } </style> |
jQuery mousewheelの実装コード
横スクロールさせるための最も単純なコードだと思います。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | <script> $(function(){ //-------------------------------------------------------------------------------- // マウスホイールで横スクロール処理 //-------------------------------------------------------------------------------- // スクロール後の位置 var moving; // 1スクロールの移動距離 var speed = 30; $('.horizontal-scroll').mousewheel(function(event, mov) { // スクロール後の位置の算出 var moving = $(this).scrollLeft() - mov * speed; // スクロールする $(this).scrollLeft(moving); // 縦スクロールさせない return false; }); }); </script> |
おまけ１：スクロールの余韻付きバージョン
おまけとして、スクロールの余韻を残すアニメーション（26行目～36行目）を入れたバージョン。
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 30 31 32 33 34 35 36 37 | <script> $(function(){ //-------------------------------------------------------------------------------- // マウスホイールで横スクロール処理 //-------------------------------------------------------------------------------- // スクロール後の位置 var moving; // スクロール後の位置+余韻の距離 var aftermov; // 余韻の距離 var after = 200; // 1スクロールの移動距離 var speed = 30; // アニメーション var animation = 'easeOutCirc'; // アニメーションスピード var anm_speed = 500; $('.horizontal-scroll').mousewheel(function(event, mov) { // スクロール後の位置の算出 var moving = $(this).scrollLeft() - mov * speed; // スクロールする $(this).scrollLeft(moving); // 余韻の計算 if (mov < 0) { // 下にスクロールしたとき aftermov = moving + after; } else { // 上にスクロールしたとき aftermov = moving - after; } // 余韻アニメーション $(this).stop().animate({scrollLeft: aftermov}, anm_speed, animation); // 縦スクロールさせない return false; }); }); </script> |
おまけ2：横スクロールの終端に来たら、縦スクロールに切り替えるバージョン
おまけ1の余韻バージョンに加えて、横スクロールの終端まで来たら、縦スクロールに切り替える処理を入れています。
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 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 | <script> $(function(){ //-------------------------------------------------------------------------------- // マウスホイールで横スクロール処理 //-------------------------------------------------------------------------------- // スクロール後の位置 var moving; // スクロール後の位置+余韻の距離 var aftermov; // 余韻の距離 var after = 200; // 1スクロールの移動距離 var speed = 30; // アニメーション var animation = 'easeOutCirc'; // アニメーションスピード var anm_speed = 500; // 前回のスクロール位置 var lastmov = 0; $('.horizontal-scroll').mousewheel(function(event, mov) { // スクロール後の位置の算出 var moving = $(this).scrollLeft() - mov * speed; // スクロールする $(this).scrollLeft(moving); // 余韻の計算 if (mov < 0) { // 下にスクロールしたとき aftermov = moving + after; } else { // 上にスクロールしたとき aftermov = moving - after; } // 横スクロールの終端まで来たら、縦スクロールに切り替える処理 // スクロール位置が前回の位置と同じかどうかチェックし // 同じだったら、縦スクロールする // 違うなら、横スクロールする if(lastmov == aftermov) { // 縦スクロール return true; } else { // 余韻アニメーション $(this).stop().animate({scrollLeft: aftermov}, anm_speed, animation); lastmov = aftermov; // 縦スクロールさせない return false; } }); }); </script> |
参考にさせていただいたサイト
https://sterfield.co.jp/designer/%E6%A8%AA%E3%82%B9%E3%82%AF%E3%83%AD%E3%83%BC%E3%83%AB%E3%82%92%E5%8F%AF%E8%83%BD%E3%81%AB%E3%81%A7%E3%81%8D%E3%82%8B%E3%80%8Cjquery-mousewheel%E3%80%8D%E3%82%92%E4%BD%BF%E7%94%A8%E3%81%97%E3%81%A6/
https://www.webopixel.net/javascript/435.html
