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

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

参考

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

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

導入

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

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

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

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

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

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

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

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

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

コメント

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