コピペで簡単実装!横スクロールのあるコンテンツをマウスホイールでスクロールされるようにする
ページ内に横スクロールのあるコンテンツがある場合に通常ではスクロールバーをドラッグしないと横スクロールさせることはできません。
普段この仕様で困ることはあまりないのですがマウスホイールで横スクロールさせたい時もありますよね。
そんな時に実装する方法をご紹介。
まずは</body>前にでも下記コードを張り付け
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<script> var cxs = document.querySelectorAll('.common-x-scroll'); cxs = Array.prototype.slice.call(cxs, 0); cxs.forEach(function(el){ el.addEventListener("wheel",function(e){ if (e.deltaX === 0) { var reg = 1.5;//スクロール量を変更する場合はここを調整 el.scrollLeft = el.scrollLeft + e.deltaY*reg; e.preventDefault(); } }); }); </script> |
ちなみにIE対応です。(あと二日でサポート終わるけど。)
あとは横スクロールの発生しているコンテンツに「common-x-scroll」とクラスを与えればそのコンテンツ上でのマウスホイールは横スクロールになります。
JavaScript