Question

我有一个HTML5 / jQuery Mobile应用程序，我正在使用PhoneGap进行开发。我已成功将此应用程序部署到iOS，现在将其移植到Android。

在Android设备上测试此应用时，我遇到了一些奇怪的行为，这是一款运行Ice Cream Sandwich的三星Galaxy S2。

我有一个包含在div中的元素列表，并且该div具有固定的高度。它还使用CSS属性overflow-y：scroll来允许移动用户滚动列表。该列表包含锚链接。像这样：

<div style="display: block; width: 320px; height: 250px; overflow-y: scroll;">
    <a href="index1.html">Link 1</a>
    <a href="index2.html">Link 2</a>
    <a href="index3.html">Link 3</a>
    <a href="index4.html">Link 4</a>
</div>

当锚链接列表仍然在框的标准高度时（即如果列表只有几个元素），它可以正常工作。您可以点击链接，它们按预期运行。但是，当链接列表扩展超出框的高度并且overflow-y滚动生效时，我无法再点击链接。滚动效果很好，但是我无法点击滚动div中的任何元素！

奇怪的是，我不能用任何链接做的其他事情是使用浏览器的文本选择功能选择它们。当滚动链接太少时可能会出现这种情况，但滚动处于活动状态时则无法实现。

我曾假设带有ICS的Galaxy S2足够新，可以正确支持溢出滚动，但也许我错了。关于如何让它工作的任何想法？我似乎无法在网上找到任何关于冰淇淋三明治中的漏洞或支持溢出的特定信息。

Answer 1

您可以直接将tap事件处理程序附加到这些链接吗？使用jQuery Mobile链接并不像看起来那么简单。

自从你开始使用iOS以来，那里是否还有任何特定于iOS的CSS？为了在iOS上获得良好的滚动，你有时需要添加一个3d变换来触发硬件加速，但这会对android产生一些有趣的副作用。

另一件可能值得尝试的事情是设置overflow而不是overflow-y - 它不应该有所不同，但有时也是如此。

Answer 2

我知道这是一个老问题，但我认为解决方案可能会有所帮助，因为它仍然适用于当前版本的phonegap / cordova：

要解决此问题，您必须将transform属性添加到fixed元素，即您的主要div：

div {
  -webkit-transform: translate3d(0,0,0);
  transform: translate3d(0, 0, 0);
}

积分here

Android / PhoneGap中的overflow-y会产生奇怪的行为

2 个答案: