Question

我正在开发一个带有PhoneGap的HTML5应用程序，它在前面有一个长页面并启用了滚动功能。默认情况下在手机上（至少是iPhone），当你滚动到顶部时，内容类型会减轻（我能想出的最佳描述）。因为PhoneGap使用浏览器，我的标题也会受到这种宽松的影响，我不想这样做。

是否可以允许某些HTML对象的缓动，而不允许其他HTML对象？

Answer 1

检查https://cordova.apache.org/docs/en/edge/config_ref_index.md.html#The%20config.xml%20File - 您可以通过将此页面添加到config.xml文件来控制您的页面是否允许过度滚动：

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

这不会阻止您的网页滚动，当然 - 您几乎肯定还需要在页面顶部修复标题才能获得原生体验。此外，您几乎肯定希望保留长文本区域的原生过度滚动行为，因此在CSS中使用此行为需要维护本机滚动行为的元素：

overflow: auto;
-webkit-overflow-scrolling: touch;

2014年9月4日添加：

这是我典型的DOM结构：

<div class="ui-container">
  <div class="ui-navigation-bar"> Title of View </div>
  <div class="ui-scroll-container"> Long Content Goes Here</div>
</div>

在上面的结构中，导航栏固定在屏幕顶部，CSS类似于：

.ui-navigation-bar {
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 44px;   /* height: 64px; padding-top: 20px; for iOS 7, assuming border-box sizing */
    z-index: 9; /*use transform: translateZ(9px) if using 3D transforms*/
}

值得一提的是ui-container也绝对定位：

.ui-container {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    z-index: 0;
}

最后，可滚动内容会收到：

.ui-scroll-container {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    overflow: auto;
    -webkit-overflow-scrolling: tough;
    padding-top: 44px; /* avoid navbar; iOS 7: 64px */
}

这会将标题修复到屏幕顶部（或下一个定位的父级），并将其置于可滚动内容的上方。可滚动内容在其自己的div中，确保它与所有其他内容分开滚动（和弹跳），从而保留原生的感觉。

值得注意的是，您可以使用top:44px代替padding-top: 44px - 我使用填充的原因是因为我经常在导航栏中应用渐变来模拟iOS7＆＃39;模糊的酒吧。它不是本机完美的，但它允许iOS 7的滚动不足或不透明效果。

从滚动缓动中排除对象

1 个答案: