スマートフォン:flipsnap(5)

バグ取りには時間がかかります…。
前回の最後で紹介した画像がずれるバグですが、結果から言うとcssで簡単に対処できました。
※デバッグしやすいように一定時間でページが切り替わる処理は外しています。

デバッグ用サンプル
サンプル:18_flipsnap.html  ここで利用しているcssはこちら
※jQueryのソースはhtmlに書いてあります。

 
flipsnap.jsのコードを調べて、フリックの位置がcurrentXで管理されていることを
確認したので、currentXがどのようにずれるのかを調べました。
以下のjQueryを追加してタッチ後のcurrentXを確認するようにしていました。

$(document).on("touchend mouseup",function(){
 var myX = flipsnap.currentX;
 $(".debug").text(myX);
})

しかしバグが発生した状態でもcurrentXは正常の値を表示しており問題はありませんでした。
ここで早速手詰まりになったのですが、PCで動作確認中に表示されていた横スクロールを
移動してcurrentXを表示させたのです。すると見た目はずれているのにcurrentXは正常の
値となり、バグと同じ現象ではないか!となったのです。

 
つまりスマートフォンでは横スクロールは見えていなくても、操作が可能で希に操作されてしまう
ことでバグが発生していたのだと。ということで#showcaseのcssにoverflow:hidden;を
設定しスクロールバーを表示しないようにしました。

#showcase {
 width: 100%;
 position:relative;
 overflow:hidden;
}

そしたらバグは発生しないようになりました。めでたし、めでたし。
 
 
 

2 Responses to スマートフォン:flipsnap(5)

  1. flipsnapを使用するにあたりこちらを参考にさせていただきました。
    一点質問なんですが複数設置する場合はどうしたらいいでしょうか?
    お暇なときにでも教えていただけるとありがたいです。

    • flipsnapの機能を要素に設定している部分は以下の部分になります。
      Flipsnapの()内にスライドにしたい要素を設定し、その返値を利用して
      スライドを制御します。
      ——————
      var flipsnap = Flipsnap(“#showcase ul”);
      ——————
      この処理によって#showcase内にあるul要素がスライドとなるわけです。
      なので追加する場合は以下の様に別の返値を得ればよいわけです。
      ——————
      var flipsnap_2 = Flipsnap(“#showcase_2 ul”);
      ——————
      そして追加したスライドを操作する場合は、以下の様にflipsnap_2を利用します。
      以下の例はスライドを次に進める例です。
      ——————
      flipsnap_2.toNext();
      ——————
       

コメントを残す

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


8 − = 五


*

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