IT the Best

はてなブログのカスタマイズ情報を中心に、WEBデザインからJavaScriptまでWEB系の開発情報を発信します。便利ツールや暇つぶしのゲームなど開発物も公開します。

マウスドラッグスクロール 【JS】【jQuery】プラグイン(拡張) | 【JavaScript(jQuery)】スクロールをマウスドラッグで可能にする

JavaScript(jQuery)でマウスドラッグによるスクロールを可能にする。

 

 

マウスドラッグスクロール

※環境によっては正常に動作しない可能性があります。

当処理はjQueryを使用しています。

 www.it-the-best.com

 

DEMO

  • 1
  • 2
  • 3
  • 4
  • 5

 

 

 

コード

function mousedragscrollable(element){
    let target; // 動かす対象
    $(element).each(function (i, e) {
        $(e).mousedown(function (event) {
            target = $(e); // 動かす対象
            $(e).data({
                "down": true,
                "move": false,
                "x": event.clientX,
                "y": event.clientY,
                "scrollleft": $(e).scrollLeft(),
                "scrolltop": $(e).scrollTop(),
            });
            return false
        });
        // move後のlink無効
        $(e).click(function (event) {
            if ($(e).data("move")) {
                return false
            }
        });
    });
    // list要素内/外でのevent
    $(document).mousemove(function (event) {
        if ($(target).data("down")) {
            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;
    });
}

 

jQuery拡張版
jQuery.prototype.mousedragscrollable = function () {
    let target; // 動かす対象
    $(this).each(function (i, e) {
        $(e).mousedown(function (event) {
            target = $(e); // 動かす対象
            $(e).data({
                "down": true,
                "move": false,
                "x": event.clientX,
                "y": event.clientY,
                "scrollleft": $(e).scrollLeft(),
                "scrolltop": $(e).scrollTop(),
            });
            return false
        });
        // move後のlink無効
        $(e).click(function (event) {
            if ($(e).data("move")) {
                return false
            }
        });
    });
    // list要素内/外でのevent
    $(document).mousemove(function (event) {
        if ($(target).data("down")) {
            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;
    });
}

 

使用方法

mousedragscrollable(element);

 

jQuery拡張版
$(element).mousedragscrollable()

使用例

マウスドラッグスクロール HTML CSS JS
  • 1
  • 2
  • 3
  • 4
  • 5
<ul class="mousedragscrollable_1 sample">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
</ul>
.mousedragscrollable_1{
    white-space: nowrap;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}
.mousedragscrollable_1>* {
    display: inline-block;
    white-space: normal;
}
.sample{
    height: 250px;
}
.sample li{
    list-style: none;
    padding: 150px;
    background: aliceblue;
    border: 1px solid;
}
function mousedragscrollable(element){
    let target; // 動かす対象
    $(element).each(function (i, e) {
        $(e).mousedown(function (event) {
            target = $(e); // 動かす対象
            $(e).data({
                "down": true,
                "move": false,
                "x": event.clientX,
                "y": event.clientY,
                "scrollleft": $(e).scrollLeft(),
                "scrolltop": $(e).scrollTop(),
            });
            return false
        });
        // move後のlink無効
        $(e).click(function (event) {
            if ($(e).data("move")) {
                return false
            }
        });
    });
    // list要素内/外でのevent
    $(document).mousemove(function (event) {
        if ($(target).data("down")) {
            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;
    });
}
mousedragscrollable(".mousedragscrollable_1");

 

マウスドラッグスクロール(jQuery拡張版) HTML CSS JS
  • 1
  • 2
  • 3
  • 4
  • 5
<ul class="mousedragscrollable_2 sample">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
</ul>
.mousedragscrollable_2{
    white-space: nowrap;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}
.mousedragscrollable_2>* {
    display: inline-block;
    white-space: normal;
}
.sample{
    height: 250px;
}
.sample li{
    list-style: none;
    padding: 150px;
    background: aliceblue;
    border: 1px solid;
}
jQuery.prototype.mousedragscrollable = function () {
let target; // 動かす対象
$(this).each(function (i, e) {
    $(e).mousedown(function (event) {
        target = $(e); // 動かす対象
        $(e).data({
            "down": true,
            "move": false,
            "x": event.clientX,
            "y": event.clientY,
            "scrollleft": $(e).scrollLeft(),
            "scrolltop": $(e).scrollTop(),
        });
        return false
    });
    // move後のlink無効
    $(e).click(function (event) {
        if ($(e).data("move")) {
            return false
        }
    });
});
// list要素内/外でのevent
$(document).mousemove(function (event) {
    if ($(target).data("down")) {
        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;
});
}

$(".mousedragscrollable_2").mousedragscrollable();

 

 

 

補足

スタイルの

-webkit-overflow-scrolling: touch;

は、iOSのSafariで慣性スクロールを可能にするためのものです。

 developer.mozilla.org