在触摸开始时将类添加到正文而不是.scroll()

Question

在触摸开始时将类添加到正文而不是.scroll()

Ale*_*ust 5 javascript mobile jquery scroll ios

我有一些JavaScript用于<body>在用户滚动时为我的元素添加一个类:

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

Run Code Online (Sandbox Code Playgroud)

这在桌面浏览器上运行良好,但在iOS(可能还有其他移动设备)上,只在触摸发布时添加类,而不是在用户第一次触摸屏幕滚动时添加.

如何调整此脚本以在触摸时触发此类,同时仍然可以像标准桌面用户一样正常工作？

这是一个小提琴,展示了这个剧本:http://jsfiddle.net/alecrust/AKCCH/

Answer 1

SM7*_*M79 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');
      }
  });
}

Run Code Online (Sandbox Code Playgroud)

这是一个工作的 jsfiddle：http ://jsfiddle.net/BLrtr/

可能会有一些复杂的情况，所以我建议您阅读本文以理解它们。另外，您可能需要检查这些第三方库以进行触摸事件处理。

归档时间：	12 年，10 月前
查看次数：	3147 次
最近记录：	12 年，10 月前