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/

可能会有一些并发症，所以我建议您阅读本文以了解它们。此外，您可能需要检查这些3rd 方库以进行触摸事件处理。

于 2012-10-21T22:10:19.957 回答