【JavaScript】スクロールをマウスドラッグで可能にする | マウスドラッグスクロール | JS | 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) {
            event.preventDefault();
            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")) {
            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;
    });
}

Copy

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
        });
        // move後のlink無効
        $(e).click(function (event) {
            if ($(e).data("move")) {
                return false
            }
        });
    });
    // list要素内/外でのevent
    $(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;
    });
}

Copy

使用方法

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) {
            event.preventDefault();
            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")) {
            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;
    });
}
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) {
        event.preventDefault();
        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")) {
        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;
});
}

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

補足

スタイルの

-webkit-overflow-scrolling: touch;

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

 developer.mozilla.org