iPhone Web App - 在 iOS8 中停止身体反弹/滚动答案

【问题标题】：iPhone Web App - Stop body bounce/scrolling in iOS8iPhone Web App - 在 iOS8 中停止身体反弹/滚动
【发布时间】：2014-11-12 19:39:22
【问题描述】：

是的，我知道。这个问题已经被问过一千次了。感谢你们所有人，我能够找到一个最终在更新到 iOS 8 后 - 似乎没有任何效果！

什么对我来说在 iOS7 中非常有效

CSS

html, body, .scrollable {
overflow: auto; 
-webkit-overflow-scrolling: touch;
}

jQuery

$(function() {
  $(document).on("touchmove", function(evt) { evt.preventDefault() });
  $(document).on("touchmove", ".scrollable", function(evt) { evt.stopPropagation() });
});

我尝试过的其他解决方案：

全部在这里：iPhone Web App - Stop body scrolling

在这里：iOS Safari – How to disable overscroll but allow scrollable divs to scroll normally?

在这里：Disable iOS Overscroll but allow body scrolling

还有更多...

那么，有没有人知道一种 iOS8 兼容的方式来禁用身体越界滚动/反弹效果（除了应用于 phonegap 项目的原生解决方案）？

【问题讨论】：

这太奇怪了！为什么它在 iOS 8 中不起作用？真的希望这是一个将在 iOS 8.0.1 中修复的错误
不幸的是，iOS 8.0.2 - 仍然有弹性..
iOS 8.1 - 同样的问题
这是我曾经处理过的最令人愤怒的事情之一......我只是想做一些很棒的东西......但相反 - 我被挫败了。

标签： web-applications scroll ios8 bounce

【解决方案1】：

所以这也困扰了我很久，我终于找到了解决办法！

在 iOS8 之前，Safari 没有亚像素渲染。现在有了亚像素渲染，报告的元素高度以亚像素十进制给出，滚动高度是实际渲染的整数高度。如果您以百分比指定大小，这可能会导致高度比应有的小像素的一小部分。

而不是测试

if (elem[0].scrollHeight > height) {
                    e.stopPropagation();
}

对此进行测试将为您提供匹配的四舍五入数字。

if (elem[0].scrollHeight > Math.ceil(height)) {
                    e.stopPropagation();
}

【讨论】：

【解决方案2】：

这是通过 preventOverScroll.js 解决的问题

看看 www.digitpro.it/Takashi 的“Promozioni”和“Altro > Chi Siamo 选项卡提供了一个带有滚动和没有滚动反弹效果的 iframe :) 随意查看源代码 JS + CSS

【讨论】：

是404。在你的答案中添加preventOverScroll.js的相关代码即可。

【解决方案3】：

这与position: fixed 得到更可靠的尊重这一事实相结合，可以产生一些有趣的效果。您可以使用一个简单的固定“底层”进行拉动以刷新，当身体被拉下时它会保持原状，从而显露出来。

回答你的问题：

如果满足以下条件，touchmove 处理程序会丢弃 (event.preventDefault()) 事件：

事件比上一个事件更进一步
当前target 元素和body 位于scrollTop == 0
以上两种情况同样需要注意底胶拉力(scrollTop + innerHeigh == scrollHeight)

如果您正在寻找更详细的切除术，请告诉我，很高兴写出来。

【讨论】：