Question

我正在为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>

scroll screenshot http://img20.imageshack.us/img20/5140/screenshot20130225at212.png

Answer 1

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上处理滚动的最佳开端。然后，只需将'overflow：auto'添加到您需要滚动的任何元素。使用推翻或iscroll来帮助支持iOS＆lt; 5，android＆lt; 3，等等。

Answer 2

这解决了它（至少在iOS上 - 可能在其他平台上有其他兼容性的东西）

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

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

Answer 3

对于最新的答案（截至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/

Answer 4

以上都没有解决我的问题，但在链接下面。在我的情况下，在内容之下有一个过大的差距无法解释，这个差距导致了滚动条。

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

Answer 5

尝试隐藏系统托盘，它为我做了诀窍。

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

shell:SystemTray.IsVisible="False" d:DesignHeight="768" d:DesignWidth="480"

Answer 6

这可能会有所帮助：

body {
    height: 100%;
    overflow: hidden;
}

Phonegap垂直滚动

6 个答案: