上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

Adobe ReaderやiPhone、Androidで画面を操作するときのように、画面を掴んでスクロールを実装したい、しかもjavaScriptで、と思って色々探しました。
Flashを使う、ということであれば以下のサイトがイメージに近いものです。
http://www.griplimited.com/

で、探索した結果、以下のjQueryプラグインにたどり着きました。
jQuery.flickable
http://lagoscript.org/jquery/flickable
ブログ→iPhoneのようにフリック操作でスクロールできるjQueryプラグインつくった

動作デモも上記サイトにあります。

1点、残念なのは、そのままでは最新版のjQuery(2012/02/12 時点では1.7.1)で動作しません。
上記サイトのコメント欄にある修正を実施する必要があります。


jQueryの1.6系で使用出来なかったので、1.5系との違いを調べてみました。
attr()の仕様が1.5から1.6で変わってるせいで動かないようです。
他の方の参考にでもなればと思いまして、以下変更箇所の変更例を記載しておきます。

jQuery.flickable 1.0b3.jsのファイル
328行目
maxHeight = this.elementWrapper.attr('scrollHeight') - (_padding.height || 0) * 2;
↓変更後
maxHeight = this.elementWrapper.get(0).scrollHeight - (_padding.height || 0) * 2;

簡単な解説ですが、.attr('scrollHeight')これでは,1.6では値が取れないので.get(0).scrollHeightに変更しています。
他の記述部分も全て同様に変更すれば動くようになるようです。
以下、置換用
attr('scrollHeight')

get(0).scrollHeight
attr('scrollWidth')

get(0).scrollWidth
attr('clientWidth')

get(0).clientWidth
attr('clientHeight')

get(0).clientHeight
他のattrの部分は変更不要で動作確認しました。
ご参考までに。



1か所気付きにくい修正があったので補足しておきます。

342行目
refreshメソッドにある
padding[_dimension] = max > clientElement.attr('client' + dimension) && !self.noPadding ?
を以下に
padding[_dimension] = max > clientElement.get(0)['client' + dimension] && !self.noPadding ?

ご参考までに。



これで最新版のjQuery1.7.1で問題なく動作します。
Related Posts

Thoughts on スポンサーサイトAdobe Readerのように要素を掴んでスクロール可能にするjQueryプラグイン

Leave a Reply

* less than 16 characters
* less than 24 characters
* less than 16 characters
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。