5

<body>ユーザーがスクロールしているときに要素にクラスを追加するために使用している JavaScript があります。

var $body = $('body');
$(window).scroll(function() {
    $body.addClass('scrolling');
    var scroll = $(window).scrollTop();
    if (scroll <= 1) {
        $body.removeClass('scrolling');
    }
});

これはデスクトップ ブラウザーではうまく機能しますが、iOS (および場合によっては他のモバイル デバイス)では、ユーザーが最初に画面にタッチしてスクロールするときではなく、タッチリリース時にのみクラスが追加されます。

このスクリプトを調整して、タッチ時にこのクラスをトリガーするにはどうすればよいですか?

このスクリプトの動作を示す Fiddle は次のとおりです: http://jsfiddle.net/alecrust/AKCCH/

4

1 に答える 1

1

ontouchstart、ontouchmove、および ontouchend を使用して、タッチ イベントを処理できます。

var $body = $('body');

if ("ontouchstart" in document.documentElement)
{
  $(window).bind('touchmove',function(e){
    e.preventDefault();

    $body.addClass('scrollingTouch');
  });

  $(window).bind('touchend',function(e){
    e.preventDefault();

    var scroll = $(window).scrollTop();
    if (scroll <= 1) {
        $body.removeClass('scrollingTouch');
    }
  });
}
else
{
  $(window).scroll(function() {
      $body.addClass('scrolling');
      var scroll = $(window).scrollTop();
      if (scroll <= 1) {
          $body.removeClass('scrolling');
      }
  });
}

ここに動作するjsfiddleがあります：http://jsfiddle.net/BLrtr/

いくつかの複雑な問題があるかもしれませんので、これを読んで理解することをお勧めします。また、これらのサードパーティ ライブラリでタッチ イベントの処理を確認することもできます。

于 2012-10-21T22:10:19.957 に答える