横スクロールってドラッグで動かせるように出来ないの？
jQuery使えば出来るようになるよ！
通常横スクロールなどはドラッグでは動かすことは出来ませんが、jQueryを使えば出来るようになります。
今回はその方法をご紹介します。
完全無料のプログラミングスクール『ZeroPlus Gate』
30日間でWeb制作を学べる無料のプログラミングスクールがこちら
いきなり数十万するプログラミングスクールは厳しい・・・という人のお試しに最適です。
現在は無料ですがいつ有料になるか分からないので、気になる方はお早めに👇
（有料になっていたらすいません🙇♂️）
（有料になっていたらすいません🙇♂️）
jQueryを使って横スクロールをドラッグで動かせるようにする方法
まずはjQueryを使用するのでjQuery本体を読み込みましょう。
jQueryを使ったことがない人はこちらの記事を参照下さい。
あわせて読みたい
-
【初心者向け】jQueryとは？CDNを使った本体の読み込み方も分かりやすく解説
続きを見る
冒頭でも書きましたが、通常横スクロールはドラッグで動かせません。
まずはそれを確認する為にこちらをご覧下さい。
See the Pen
by junpei (@junpei-sugiyama)
on CodePen.
スクロールバーを使えば当然動かすことが出来ますが、マウスのドラッグでは動かせません。
そしてこちらはjQueryを使ってドラッグで動かせるようにしたものです。
See the Pen
スクロール（ドラッグ可） by junpei (@junpei-sugiyama)
on CodePen.
コピペして貰えれば大丈夫ですが、コードを見てみます。
<div class="scroll">
<div class="box green"></div>
<div class="box orange"></div>
<div class="box green"></div>
<div class="box orange"></div>
<div class="box green"></div>
<div class="box orange"></div>
<div class="box green"></div>
</div>
.scroll {
margin: auto;
overflow-x: auto;
white-space: nowrap;
width: 300px;
}
.box {
display: inline-block;
height: 200px;
width: 200px;
}
.green {
background-color: #3cb371;
}
.orange {
background-color: #ffbf7f;
}ここでのポイントは横スクロールにする為の以下の2行です。
overflow-x: auto;
white-space: nowrap;
ただこれはドラッグで動かす事には無関係です。
そしてドラッグで動かせるようにする為のjQueryはこちらです。
// スクロールのドラッグ有効化
jQuery.prototype.mousedragscrollable = function () {
let target;
$(this).each(function (i, e) {
$(e).mousedown(function (event) {
event.preventDefault();
target = $(e);
$(e).data({
down: true,
move: false,
x: event.clientX,
y: event.clientY,
scrollleft: $(e).scrollLeft(),
scrolltop: $(e).scrollTop(),
});
return false;
});
$(e).click(function (event) {
if ($(e).data("move")) {
return false;
}
});
});
$(document)
.mousemove(function (event) {
if ($(target).data("down")) {
event.preventDefault();
let move_x = $(target).data("x") - event.clientX;
let move_y = $(target).data("y") - event.clientY;
if (move_x !== 0 || move_y !== 0) {
$(target).data("move", true);
} else {
return;
}
$(target).scrollLeft($(target).data("scrollleft") + move_x);
$(target).scrollTop($(target).data("scrolltop") + move_y);
return false;
}
})
.mouseup(function (event) {
$(target).data("down", false);
return false;
});
};
$(".scroll").mousedragscrollable();何やら長ったらしいコードですが、編集する箇所は一番最後の.scrollだけで、ここにスクロールさせたい要素を囲っている要素のclass名を書けばOKです。
まとめ
今回はjQueryを使って横スクロールをドラッグで動かせるようにする方法を解説しました。
デフォルトでドラッグ出来るようにしておいて欲しいですよね。。。
以上になります。
この記事が役に立ったと思ったら、シェアボタンからX（旧Twitter）などにシェアすると、いいねされてフォロワーが増えたりすることがあるよ！
