[jQuery]マウスドラッグの横スクロール
2月 23, 2023最近スマホでよく見る要素の横スクロールデザイン。
PCでの操作方法は三角の矢印をだして横スクロールさせたり、
自分のところでは横スクロールバーを初期設定で非表示にし、要素に触れたらほっそいスクロールバーを表示、スクロールバーの上をhoverしたら太めのスクロールバーになり掴める、という仕様。
(ノートPCやMacのトラックパッドではスマホと同じようにフリックでスクロール可能)
だったのですが、最近はマウスドラッグ(マウスクリックで掴んで)横スクロールが出来るものが増えていたので記述ブログを参考にしてTOPページの新着商品の表示に導入しました。
// スクロールのドラッグ有効化
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;
});
};
$(".mousedrug").mousedragscrollable();
jQueryの参考コードをフッターのスクリプト用ブロックそのままコピペしました。(助かってます、ありがとうございます)
一番下のclass名(.mousedrug)を要素に付与すればマウスドラッグでの横スクロールが可能になります。
横スクロールする要素の大枠(wrap)にclassを追加で付与しました。(スマホのフリック用に-webkit-overflow-scrolling: touch;も同じ要素の大枠に追加している)
大変助かりました参考にさせて頂いたサイトは下記になります。
0 コメント