Cordova / Phonegap：仅对页眉和页脚禁用反弹答案

【问题标题】：Cordova / Phonegap: Disable bounce only for header and footerCordova / Phonegap：仅对页眉和页脚禁用反弹
【发布时间】：2014-05-06 08:21:20
【问题描述】：

我在config.xml 中使用这个属性来禁用webview (iOS) 的弹跳：

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

这按预期工作。但是如果我只想为我的页眉和页脚禁用这种弹跳呢？它们固定在我的应用程序的顶部和底部，所以我不希望它们反弹。但是当内部容器仍然有这种反弹效果时，它更像是一种原生的感觉（尤其是对于列表）。

【问题讨论】：

【解决方案1】：

继续使用

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

在您的 CSS 中，在您的可滚动包装器上使用以下代码：

-webkit-overflow-scrolling: touch;

它会给可滚动的内容带来这种有弹性的效果。

overflow：隐藏在您的页眉和页脚上，以避免用户在其上滚动并溢出：滚动您的内容以及 css webkit 滚动触摸。

注意：您应该在移动设备上测试它（它不会在计算机上呈现）

【讨论】：

谢谢！它适用于更长的内容。但是如果内容不需要滚动，因为它太短了怎么办？那么你就不会有那种反弹效果。在查看原生 iOS 列表时，只有一个元素的事件，它们具有这种反弹效果。这是你的小提琴更新：jsfiddle.net/mPfeQ/1
有人对此有想法吗？当内容太短时，它不再弹跳
如果有人仍有想法，我会很高兴听到。当内容太短时它仍然失败
@23tux 4 年后：将包含的 div 设置为 min-height: 100vh 怎么样？

【解决方案2】：

您好，简单地将这些 CSS 规则添加到列表或可滚动元素中

  overflow: scroll;
  -webkit-overflow-scrolling: touch;

-webkit-overflow-scrolling: touch; 会给滚动区域提供反弹效果（原生外观）

【讨论】：