4

我正在为 ios 构建一个 phonegap 应用程序并且有垂直滚动问题。即使没有任何内容，webview 中似乎也有一些像素滚动，这影响了我在 html 中构建的绝对定位的导航栏和标签栏

这是我拥有的 html 页面 - 没有内容，我仍然得到图像中显示的滚动量：

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <meta name="format-detection" content="telephone=no" />
        <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
        <title>My App</title>
    </head>
    <body>

        <script src="scripts/vendor/cordova-2.4.0.js"></script>
    </body>
</html>

滚动截图 http://img20.imageshack.us/img20/5140/screenshot20130225at212.png

4

6 回答 6

15 
html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    overflow: hidden;
}

<meta name="viewport" content="user-scalable=no, initial-scale=1, minimum-scale=1, width=device-width" />

在 config.xml 中：

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

以上是我发现在 iOS 上处理滚动的最佳开始设置。然后，只需将“溢出：自动”添加到您需要滚动的任何元素。使用 overthrow 或 iscroll 来帮助支持 iOS < 5、android < 3 等。

于 2013-06-19T22:19:23.467 回答
7

这为我解决了（至少在 iOS 上 - 在其他平台上可能有其他兼容性）

尝试width=device-width, height=device-height从顶部的元数据中删除。

据我所知，这是设备没有考虑顶部状态栏的问题。

于 2013-06-19T22:05:21.000 回答
1

对于最新的答案（截至 2016 年），这个解决方案对我来说是 Cordova iOS 中最有效的（平滑滚动）。

.element {
  overflow-y: scroll; /* has to be scroll, not auto */
  -webkit-overflow-scrolling: touch;
}

来源： https ://css-tricks.com/snippets/css/momentum-scrolling-on-ios-overflow-elements/

于 2016-07-11T05:48:14.673 回答
0

尝试隐藏系统托盘，它对我有用。

在 MainPage.xaml 上，将“IsVisible”设置为 false。

shell:SystemTray.IsVisible="False" d:DesignHeight="768" d:DesignWidth="480"
于 2014-06-22T19:05:53.640 回答
0

以上都没有解决我的问题，但下面的链接。在我的情况下，内容下方有一个无法解释的过度间隙，这个间隙导致滚动条。

这是链接： https ://github.com/phonegap/phonegap/wiki/Prevent-Scrolling

于 2013-11-08T20:12:52.377 回答
-2

这可能会有所帮助：

body {
    height: 100%;
    overflow: hidden;
}
于 2013-02-25T21:44:31.627 回答