iOS+jQuery:部分横スクロール(3)

昨年末に完成させたPC版のスクロールをスマートフォン用に変更するのは簡単です。
まずは完成したサンプルを確認しましょう。
サンプル:部分横スクロール(iOS版) iOSのsafariで確認してください。
 
ソースを確認してください。前回のソースから変更している部分はコメントが書いてある
4カ所だけです。PCとスマートフォンの最大の違いはイベントですから、まずはイベントを
書き換えています。ドラッグを開始する部分は以下の様にmouseupからtouchstartに
変更しました。

$("#pageArea").on("touchstart", function(eo){

 
そしてドラッグを完了する部分は以下の様にmouseupからtouchendとtouchcancelに
変更しています(システム側の都合でタッチがキャンセルされたときもドラッグを停止した方が
無難なのでtouchcancelも含みました)。

$(document).on("touchend touchcancel", function(eo){

 
 
残りの変更点はイベントオブジェクトについてです。これは以前説明したようにjQueryの
イベントオブジェクトにはタッチイベントが含まれていないのでオリジナルのイベントオブジェクト
にアクセスする必要があるからです。ということで、イベントオブジェクトが必要な部分に
以下の処理を追加してタッチイベントのプロパティにアクセスできるようにしています。
これで完成です。

var eo = eo.originalEvent;

 
 
 

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です


+ 三 = 4


*

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>