Html 如何在 html5 全屏 iPhone 应用程序中禁用弹跳?

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/9651215/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-28 23:02:22  来源:igfitidea点击:

How to disable bouncing in html5 fullscreen iphone app?

iphonehtmljquery-mobile

提问by Michal B.

I want to make html5 fullscreen app. I made a page and added it as an icon to my iphone. I added metatags:

我想制作 html5 全屏应用程序。我制作了一个页面并将其作为图标添加到我的 iphone 中。我添加了元标签:

 <meta name="apple-mobile-web-app-capable" content="yes">
 <meta name="apple-mobile-web-app-status-bar-style" content="black">
 <meta name="viewport" content="width=device-width, user-scalable=no" />

What I wanted to achieve is: black status bar on top (this does not work and I do not know why. It is still default status bar...anyone ideas?) without possibility to zoom (like in facebook app) - this works fine.

我想要实现的是:顶部的黑色状态栏(这不起作用,我不知道为什么。它仍然是默认状态栏......任何人的想法?)没有缩放的可能性(如在 Facebook 应用程序中) - 这有效美好的。

Now the problem - I can scroll on my iphone even if my app fits on the screen. It bounces back, but I dont want this behavior. I would like to disable that and enable scrolling for a particular div (.ui-content). How can I achieve that?

现在的问题 - 即使我的应用程序适合屏幕,我也可以在我的 iphone 上滚动。它会反弹,但我不想要这种行为。我想禁用它并为特定的 div (.ui-content) 启用滚动。我怎样才能做到这一点?

EDIT:status bar is black now. It changed itself after some time. Was the previous version cached on the iphone or what?

编辑:状态栏现在是黑色的。一段时间后它自己改变了。以前的版本是缓存在 iphone 上还是什么?

回答by dmanxiii

This will prevent scrolling on the whole page

这将防止在整个页面上滚动

document.ontouchmove = function(e) {e.preventDefault()};

In your case, where you want some divs to be scrollable, and some not to, you should be able to catch the event before it gets to the document

在您的情况下,您希望某些 div 可滚动,有些不可滚动,您应该能够在事件到达文档之前捕获该事件

scrollableDiv.ontouchmove = function(e) {e.stopPropagation()};

回答by Likwid_T

If your using Cordova 1.7+, open the Cordova.plist file and set the key UIWebViewBounce to NO

如果您使用 Cordova 1.7+,请打开 Cordova.plist 文件并将键 UIWebViewBounce 设置为 NO

回答by AbidCharlotte49er

Extending dmanxii's approach here is what we are doing.

在这里扩展dmanxii的方法是我们正在做的。

    $("body").on("touchmove", function (event) {
        if ($(event.target).is(".WhatEverClass") || $(event.target).parentsUntil().is(".ParentClass")) {
            //console.log("NOT Disabled"); 
        }
        else {
            //console.log("Disabled"); 
            event.preventDefault();
        }
    });