禁用iOS Safari中的过度滚动

时间:2012-09-28 12:18:43

标签: javascript jquery iphone touch mobile-safari

如何防止Safari iOS出现过度滚动? 我会使用触摸手势在网站上导航,但我不能。

我试过了:

$(window).on('touchstart', function(event) {

    event.preventDefault();

});

但是通过这种方式我禁用了所有手势,事实上我无法通过捏合和捏合进行缩放。

任何解决方案? 感谢。

2 个答案:

答案 0 :(得分:12)

这种方式将允许可滚动元素,同时仍然防止浏览器本身的过度滚动。

//uses document because document will be topmost level in bubbling
$(document).on('touchmove',function(e){
  e.preventDefault();
});
//uses body because jquery on events are called off of the element they are
//added to, so bubbling would not work if we used document instead.
$('body').on('touchstart','.scrollable',function(e) {
  if (e.currentTarget.scrollTop === 0) {
    e.currentTarget.scrollTop = 1;
  } else if (e.currentTarget.scrollHeight === e.currentTarget.scrollTop + e.currentTarget.offsetHeight) {
    e.currentTarget.scrollTop -= 1;
  }
});
//prevents preventDefault from being called on document if it sees a scrollable div
$('body').on('touchmove','.scrollable',function(e) {
  e.stopPropagation();
});

答案 1 :(得分:7)

是实现此目的的最简单方法:

$(function() {
    document.addEventListener("touchmove", function(e){ e.preventDefault(); }, false);
});

希望这有帮助。

最佳。