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

我目前正在研究针对触摸设备（主要是iOS）优化的单页网页应用程序。我通过-webkit-overflow-scrolling: touch;实现了新的iOS原生滚动，除了我们仍在体验整个页面主体上的苹果弹性滚动效果以外，所有的工作都很好。禁用iOS弹性体滚动并保持本地滚动工作

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

Here's a fiddle来证明我目前使用的是什么。

有没有人找到一个解决方案，禁用身体弹性滚动，但让内部可滚动工作？

来源

2012-02-02 madcapnmckay

我注意到为$（document）禁用touchmove被注释掉了。这是故意的吗？ – zvona 2012-02-02 07:53:06

是的。如果您取消注释，则禁用所有滚动。对不起，我应该提到这一点。 – madcapnmckay 2012-02-02 19:56:45

我已经适应从Conditionally block scrolling/touchmove event in mobile safari使用道场很好的解决方案：

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在这种情况下。

来源

2012-02-23 17:22:22

你确定这可以吗？我无法复制这个小提琴的工作......想知道这是否是一个正确的答案 – zanona 2012-04-01 21:51:29

仍然适合我。 – 2012-06-22 16:37:11

在IOS 7中，此代码只会在页面滚动一次后才能防止弹性滚动。例如： 1.向下滚动：超过滚动 2.向下滚动：没有过度滚动 3.向上滚动：超过滚动 4.向下滚动：超出滚动 5。你向下滚动：没有overscroll 6.你向下滚动：没有overscroll – Phedg1 2014-06-16 01:30:49

也许iScroll是你在找什么（如果我得到你的问题的权利）

来源

2012-02-02 07:59:43 jesperlndk

iscroll的问题在于，它不是本地的，只是在我意识到的情况下它只实现了容器上的滚动。 webkit溢出滚动允许在容器上进行本地触摸滚动并且效果很好。但无论您选择哪种滚动解决方案，苹果弹性体滚动仍然存在。 – madcapnmckay 2012-02-02 16:18:20

实际上，iScroll并没有受到它的影响，我认为它提出了一个修补程序，它基本上禁用所有滚动，然后在其顶部添加其处理程序以启用滚动。我正在考虑做类似的事情，但让本地滚动继续。 – madcapnmckay 2012-02-02 19:36:56

在复制我的帖子的风险，我试图解决同样的问题，到目前为止，我只有这么远：

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

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

我能想到的唯一的事情是检查$的scrollTop的（）（“滚动”），然后有条件地结合preventDefault（）方法，如果是0

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

感叹。令人沮丧。

来源

2012-09-05 22:52:45 tim

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

回答

相关问题