禁用iOS弹性体滚动和保持本地滚动工作

我目前正在研究针对触摸设备（主要是iOS）优化的单页网页应用程序。 我已经通过-webkit-overflow-scrolling: touch;实现了新的iOS原生-webkit-overflow-scrolling: touch; 除了我们还在整个页面体验苹果的弹性滚动效果之外，它们都运行良好。

这涉及到当滚动结束或者主体被推动时，整个页面从视口的顶部/底部移开，并且真的放弃了这是一个web应用的事实。 我已经遵循了关于如何防止这种情况的各种指导 ，并且在他们工作的同时，防止内部可滚动元素完全工作。

这是一个小提琴演示我到目前为止使用。

有没有人发现一个解决scheme，禁用身体弹性滚动，但让内部可滚动工作？

Answer 1

我已经使用Dojo 在移动Safari中根据有条件的块滚动/触摸移动事件调整了良好的解决scheme：

 var initialY = null; dojo.connect(document, 'ontouchstart', function(e) { initialY = e.pageY; }); dojo.connect(document, 'ontouchend', function(e) { initialY = null; }); dojo.connect(document, 'ontouchcancel', function(e) { initialY = null; }); dojo.connect(document, 'ontouchmove', function(e) { if(initialY !== null) { if(!dojo.query(e.target).closest('#content')[0]) { // The element to be scrolled is not the content node e.preventDefault(); return; } var direction = e.pageY - initialY; var contentNode = dojo.byId('content'); if(direction > 0 && contentNode.scrollTop <= 0) { // The user is scrolling up, and the element is already scrolled to top e.preventDefault(); } else if(direction < 0 && contentNode.scrollTop >= contentNode.scrollHeight - contentNode.clientHeight) { // The user is scrolling down, and the element is already scrolled to bottom e.preventDefault(); } } }); 

在这种情况下，要滚动的元素是#content。

Answer 2

也许iScroll是你正在寻找的（如果我的问题是正确的）

Answer 3

冒着复制我的post的风险，我试图解决同样的问题，到目前为止，只有这一点：

  $(document).bind("touchmove",function(e){ e.preventDefault(); }); $('.scrollable').bind("touchmove",function(e){ e.stopPropagation(); }); 

如果你有一个不能覆盖整个屏幕的溢出元素，例如在iPad应用程序中，这是有效的。 但是如果你有一个移动应用程序，并且整个视口被你的溢出元素所覆盖，它就不起作用。

我唯一能想到的是检查$（'。scrollable'）的scrollTop（），然后有条件地绑定preventDefault（），如果它是0的话。

尝试之后，我注意到，当元素滚动到顶部时，webkit UA始终将scrollTop报告为0，即使它执行本地溢出滚动的“内部反弹”。 所以我不能做任何事情，因为我需要一个负面的scrollTop来设置我的条件。

叹。 令人沮丧。