[jQuery]マウスのドラッグでスクロールさせる方法

ほぼパクリ。パクリだけど忘れちゃ詰むから記事にする。

参考

ここの内容をパクるというか、そのまま使えば解決。
最高。ありがとうございます。

他にもそれっぽい記事はあったけど動かんかったりライブラリ古かったりめっちゃ長かったりで話にならんかった。これはjQuery3系で動くので現行として何も問題ないです。

導入

jsのは触ってないけど、jQuery拡張版はそのまま張っても動かないので注意。

$(function(){
//マウスドラッグスクロールの内容
});

動かんな?って思ったら無名関数で囲ってみましょう。

で、デモのjs記述部の最後にあるこれ。

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

overflowの枠(親)にあたる要素に、ここで指定したclassを書けば反映する。

cssの組み方についてはoverflow:auto;なりoverflow:scroll;なりで子要素が親要素をぶち抜いてスクロールバーが表示される状態になってればOK。

スクロールバー表示についてはちょっと難しい。基本的に枠内に収まるように自動調整されるのがhtmlなので、実数値を指定するのが無難。縦スクロールは大体でいけるけど、特に横スクロールの場合はシビアに組んでいく必要がある。まあ今回の本筋から外れるので詳細は割愛。

これには慣性はついてない。慣性があると必然的にやらんといかん「止める」動作はあんまり好きくないんでありがたい。

進む・戻るができない件※追記:20210712

なんかおかしいと思ったら、これ、5ボタンマウスの進む・戻るが無効化されてる。
マウスのクリック全てがドラッグ対象になってる。

普通に考えて、というか個人的に左クリックだけが対応すればいいのでそれを対処する。

突貫なので追記で済ませるけど、これを3箇所に書き加える。

if(event.button === 0){
}

対象はこれと

$(e).mousedown(function (event) {

これと

$(e).click(function (event) {

これと

$(document).mousemove(function (event) {

これ。

}).mouseup(function (event) {

4箇所それぞれ、マウスクリック動作の直下の内容をifで囲って左クリック時だけを対象にする。

0が何かっていうとボタンに振られてる番号で、5ボタンマウスだとこうなる。

左クリック0
ホイールクリック1
右クリック2
戻る3
進む4

Razerから手榴弾みたいなマウスも出てるし、「こいつらは除外」を指定するのはめんどくさすぎるんで、「こいつだけ対象」ってのを条件分岐してるわけになる。

もうちょっと脳みそ使えたらもうちょっとシンプルに書けると思う。

一応こんな感じ。

“mousedragscrollable.js” をダウンロード mousedragscrollable.js – 2 回のダウンロード – 2 KB

コメント

タイトルとURLをコピーしました