スクロールボタンがつけられるjQueryプラグインVertical Scroller jQuery Plugin Plus

最近夜中になると後ろの席からももいろクローバーZの曲が聞こえる幻聴に悩まされているminamiです。

今回は単純な機能ですが、意外に需要が多いかもしれないjQueryプラグインのご紹介です。

スクロールバーがなければボタンをつければいいじゃない

Vertical Scroller jQuery Plugin Plusは、長いDIVの中身をボタンでスクロールできるようにしてくれるjQueryプラグインです。

• Vertical Scroller jQuery Plugin Plus - jQuery Wisdom

使い方はラッパーのDIVを用意し、その中にスクロールしたいDIVを入れ子にします。jsでは下記のように、アップボタンにしたい要素のID、ダウンボタンにしたい要素のID、スクロールしたい要素のIDをそれぞれ指定します。

$("#wrapper").verticalScrollPlus({
	  speed: 1500, 
	  step: 50, 
	  upID: "#up",
	  downID: "#down",
	  scrollerID:"#scroll"
});

これだけでスクロールしたいDIV要素の中身をボタンでアップダウンさせることができます。

一見単純なプラグインですが、HTML内にスクロールバーを実装するのが難しいiPhone、iPadサイト対応ではこの機能は意外と役に立つかもしれません。

スクロールバーって普段何気なく使っているけどなかったら結構困るよね。ということでご紹介しました。