Swipe Scroll

ページをデザインしている時、コンテンツの量が多い場合とか右側にスクロールバーを表示させることがあります。
これがちょっとカッコ悪いんですよね。そこで前回作成したスワイプスライダーを再利用して上下スクロールもスワイプで実装してみました。
マウスドラッグとマウスホール回転の両方で操作できます。
移動範囲が40px以内だと、位置を微調整できるようにあえて慣性スクロールは発動させません。

Swipe Slider の上下版です。

上下スクロールってプラグインで結構あるんじゃないかと探してみましたが、これが意外とありません。すでにjQueryのバージョン外だったり。
あってもけっこう設置が面倒くさかったり、スクロールアイテムの上下に勝手にdivとかでラッピングしたりとか、もっとシンプルなの無いのか!って感じですね。

ほしいのが無いんなら作ってしまおうということで作ってみました。。

基本仕様は、・窓の縦横のサイズ・比例は自由。・スクロールするアイテムの高さも自由。 動作としては指を離したときに少し慣性で進んでストップ。コンテンツが枠を通り過ぎたら戻る。
の様な感じにしました。

ドラッグ→マウスホイール、ホイール→ドラッグの移行も結構スムースにできたのではと思います。最初、座標がずれて手こずりましたが・・・。

サポートブラウザもファイヤーフォックス、クロムなどのモダンブラウザは最新版。IEも11~。スマホは一応iPhoneにも対応させました。
とはいうもののスマホに関してはCSSで慣性スクロールは設定できるので意味ないんですが。なのでJSでPCのみに機能するよう振り分ける予定です。

それはそれとしてこのスクリプト、今後の作品にも使いまくっていこうと思います。(汗)