Mobile safari 移动溢出：滚动和溢出滚动：触摸//防止视口“；“反弹”；

在移动设备上（Safari、WebView，无论何处），

overflow:scroll

和

overflow-scrolling:touch

可以提供非常平滑的滚动，这很酷

但是，它会使页面“反弹”（下面圈出的区域），当您不使用它时，情况并非如此，但这会使体验变得不那么“本地”（更简单地说，就我的观点而言，这绝对没有用）

有没有办法防止它发生

---

我设法找到了一个CSS解决方案，以防止视口反弹。关键是用-webkit touch overflow:scroll将内容包装成3个部分。最终div的最小高度应为101%。此外，您应该在表示设备大小的body标签上明确设置固定宽度/高度。我在主体上添加了一个红色背景，以演示现在正在反弹的是内容，而不是mobile safari视口

下面是源代码，这里是一个plunker（这也已经在iOS7 GM上测试过）

如果您打算在iPhone 5上以全屏应用程序的形式运行此应用程序，请将高度修改为1136px（当apple mobile web app状态栏样式设置为“黑色半透明”时，或当设置为“黑色”时，将高度修改为1096px）。920x是将mobile safari浏览器考虑在内后的视口高度）

正文{宽度：640px；高度：920px；溢出：隐藏；边距：0；填充：0；背景：红色；}
.无反弹{宽度：100%；高度：100%；溢出-y:滚动；-webkit溢出滚动：触摸；}
.no bounce>div{width:100%；height:100%；overflow-y:scroll；-webkit overflow-scrolling:touch；}
.no bounce>div>div{宽度：100%；最小高度：101%；字体大小：30px；}
p{显示：块；高度：50px；}
一些头衔
项目1

项目2

项目3

项目4

项目5

项目6

项目7

项目8

项目9

项目10

项目11

项目12

项目13

项目14

项目15

项目16

项目17

项目18

项目19

项目20

这里有一篇很棒的博客文章：

连同此处的演示：

总之，您可以在包含主要内容的div上使用以下内容：

.scrollable {
    position: absolute;
    top: 50px;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: scroll;
    -webkit-overflow-scrolling: touch;
}

我认为您描述的问题是，当您尝试在已经位于顶部的div中向上滚动时，它会向上滚动页面，而不是向上滚动div，并在页面顶部产生反弹效果。我想你的问题是如何摆脱这个

为了解决这个问题，作者建议您使用自动增加可滚动div的高度

还值得注意的是，您可以使用以下方法防止用户向上滚动，例如在导航元素中：

document.addEventListener('touchmove', function(event) {
   if(event.target.parentNode.className.indexOf('noBounce') != -1 
|| event.target.className.indexOf('noBounce') != -1 ) {
    event.preventDefault(); }
}, false);

不幸的是，ScrollFix仍然存在一些问题（例如，在使用表单字段时），但是ScrollFix上的问题列表是寻找替代方案的好地方。中讨论了一些替代方法

博客文章中也提到了其他选择，如和，你可以试试

$('*').not('#div').bind('touchmove', false);

如有必要，添加此项

$('#div').bind('touchmove');

---

请注意，除了#div

之外，所有内容都是固定的。这个答案似乎已经过时，不适合现在的单页应用程序。在我的情况下，我找到了解决方案，这要感谢 如果提出了简单但有效的解决方案：

html，
身体{
位置：固定；
溢出：隐藏；
}

这是Mobile Safari的一部分。你对此无能为力。可能重复：这里也可能重复：但是我想使用iScroll有一个问题，那就是你没有使用原生滚动，这意味着iScroll的性能要差得多。我的解决方案是一个没有JS依赖项的纯CSS解决方案。当然，它在纯CSS中更好。但我无法使它工作。kylejlarson并没有真正使用iscroll；只是一个简短的修复无论如何…这个chrome的东西不应该是个问题。在这个问题上，我讨厌苹果；即使这不是一个大交易，将“css”稍微更改为

body{position:absolute；top:0px；left:0px；width:640px；height:100%；overflow:hidden；margin:0；padding:0；}

使其独立于设备。当我试图禁止在页面上专用div内的对象上滚动时，这不起作用。我甚至不确定这是否可能。也许这更有效

code

$（document）.bind（“touchmove”，function（e）{e.preventDefault（）；}）$（“#可滚动的_div”）.on（'touchmove'，函数（e）{e.stopPropagation（）；}）<代码>代码虽然此代码可能会回答问题，但提供有关其回答问题的原因和/或方式的附加上下文将显著提高其长期价值。请在您的回答中添加一些解释。

$('#div').bind('touchmove');

body {
  position: fixed;
  height: 100%;
}