在iOS Safari中禁用页面超出滚动效果

Question

如何在Safari iOS中防止过度滚动？ 我想使用触摸手势在网站上导航，但是我无法实现。

我尝试了这个方法：

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

    event.preventDefault();

});

但是这样做将禁用所有手势，事实上我不能用捏合手势缩放。

有什么解决方案吗？ 谢谢。

- keepyourweb

Answer 1

这种方式可以让元素可以滚动，同时仍然防止浏览器本身的过度滚动。

//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();
});

- Tyler Dodge

---

非常好的解决方案！对我很有用。记得在你想要滚动的所有 div 上添加 "scrollable" 类。 - Tyler Jones

这对我也起作用。感谢你拯救了我从地狱般的生活中！ - Felix Jr

Answer 2

这应该是实现此目标最简单的方法：

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

希望这可以帮到你。最好的祝福。

- Todd

---

这完美地运行，保留了div的滚动和最小代码！ - IlludiumPu36

我做了...只能执行一次！！ - IlludiumPu36

@NeedHelp，这也会阻止我的可滚动div。你有做额外的事情来保持它们可滚动吗？ - Yves Van Broekhoven

@Yves Van Broekhoven...我使用了这个自定义滚动条http://manos.malihu.gr/jquery-custom-content-scroller/，但即使没有它，我仍然可以得到可滚动的divs... - IlludiumPu36

@Yves Van Broekhoven...请查看http://130.95.21.121/museum/search.php并选择系统复选框，然后在依赖菜单中选择消化系统和全部。搜索结果将填充LH div并且可以滚动。由于上面的Todd代码，页面无法移动。 - IlludiumPu36