Phonegap竖向滚动

Question

Phonegap竖向滚动

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

- jamie holliday

6个回答

阿里云服务器只需要99元/年，新老用户同享，点击查看详情

7

这对我很有帮助（至少在iOS上 - 在其他平台可能有其他兼容性问题）

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

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

- jocull

啊哈！谢谢你提供这个信息。我花了一个晚上的时间才找到它。设备高度问题。我应该好好研究一下，而不是盲目地粘贴一个建议的元标签。 - Ade

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/

（说明：该文章介绍如何在iOS设备上实现具有动量效果的滚动条）

- dariru

0

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

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

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

- Cancian

0

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

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

- Gökhan Şengün

-2

这可能会有所帮助：

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

- ThinkingStiff

1

嗨，我已经尝试过了，似乎即使是全新安装的PhoneGap也存在这个问题。 - jamie holliday

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，

- Noogen · Accepted Answer

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”添加到需要滚动的任何元素中。使用overthrow或iscroll可以帮助支持iOS < 5，Android < 3等。