我有一些 JavaScript 用于向我的 <body> 添加一个类用户滚动时的元素:
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/
最佳答案
您可以使用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/
可能会有一些并发症，所以我建议您阅读 this了解他们。 此外，您可能想检查这些 3rd party libraries用于触摸事件处理。
关于javascript - 在触摸开始时向主体添加类而不是 .scroll()，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/13001745/