タグ

ブックマーク / blog.negic.net (2)

  • » スマホでスクロールを禁止させる方法 | negic

    軽めのjQuery Advent Calendar 2012の24日目の記事です! PCサイトでスクロールを禁止させるには、bodyにoverflow: hidden;をかければスクロールができなくなるが、スマホサイトでは、一部Android端末では効くが、iOSではスクロールができてしまいます。 スマホでスクロールを止めるには、jQueryを使うと便利です。 スマホの独自イベントである、touchmoveイベントを切ればスクロールを止めることができます。 方法は下記のとおりです。 $(window).on('touchmove.noScroll', function(e) { e.preventDefault(); }); あるタイミングでスクロールさせたくなったら、off()すればいい。 $(window).off('.noScroll'); イベント名に、.noScrollとあるが、

    oki448jp
    oki448jp 2015/04/02
    スマホでスクロールを禁止させる方法
  • » スクロール時にCSS3 Animationsを一時停止したらFPSがけっこう良くなった | negic

    パララックスなサイトを作る際に、スクロールに応じてJSで要素を動かすと思うのですが、その時にある場所でCSS3 Animationsが動いていると、スクロールがカクついてしまい、FPSが残念な状態になります。 そこで、スクロールが動き出した時にCSS3 Animationsを止めて、スクロールを止めた時にCSS3 Animationsを再度動作させるという処理を加えれば、スクロールがカクつくことなく、スムーズになります。 スクロールや、リサイズといったJavaScriptのイベントは連続で処理されます。そういったイベントの「開始した時」「動作している時」「停止した時」の状態が取れるjQueryのプラグインを作成しました。 jQuery.MovingState このプラグインを使い、CSS3 Animationsを動的に操作してみたいと思います。 CSS3 Animationsを一時的に停止

    oki448jp
    oki448jp 2013/05/08
    スクロール時にCSS3 Animationsを一時停止したらFPSがけっこう良くなった
  • 1