禁用IOS Safari Elastic Sc​​rolling [英] Disable IOS Safari Elastic Scrolling

问题描述

我正在编写一个HTML和JavaScript的网络应用程序，以便在iPhone上使用。我想要实现的是阻止应用程序弹性滚动（滚动页面范围并弹回）。但是，我需要我的应用程序的一些较长元素才能滚动（应用程序有一个长画布）。

I am writing a web app in HTML and JavaScript for use on an iPhone. What I would like to achieve is preventing the app from elastic scrolling (scrolling past the pages extents and bouncing back). However, I need some of the longer elements of my app to be able to be scrolled (the app has a long canvas).

我已尝试过在互联网上其他地方找到的许多答案，但是，所有这些解决方案都使用JQuery，完全禁用滚动，使用Phonegap或者只是普通没有在IOS 7上工作。我该怎么做？

I have tried many answers to this found elsewhere on the internet, however, all of those solutions either used JQuery, disabled scrolling altogether, used Phonegap or just plain didn't work on IOS 7. How can I do this?

推荐答案

有一种方法可以在没有jQuery的情况下实现这个目的：

There is a way to achieve this without jQuery:

document.body.addEventListener('touchmove', function(event) {
    event.preventDefault();
});

但这不是一个合适的解决方案。最好将你的内容包装在某个div中，并在其上使用css属性：

But this is not a proper solution. It's better to wrap your content in some div, and use css property on it:

 -webkit-overflow-scrolling: touch;

这里就是例子

编辑：

这只会阻止webview中的过度滚动，而不是app。因此，您需要在app config中禁用此功能。
如果您使用 phonegap ：

This will only prevent overscroll in webview, not in app. So you need to disable this feature in app config. If you use phonegap:

<preference name="DisallowOverscroll" value="true" />

更多说明这里

如果你不使用 phonegap ，您可以使用这个。

If you don't use phonegap, you can use this.

这篇关于禁用IOS Safari Elastic Sc​​rolling的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！