禁用iOS弹性体滚动并保持本机滚动工作[重复]答案

【问题标题】：Disabling iOS elastic body scroll & keep native scrolling working [duplicate]禁用iOS弹性体滚动并保持本机滚动工作[重复]
【发布时间】：2012-02-24 21:17:43
【问题描述】：

我目前正在开发针对触控设备（主要是 iOS）优化的单页 Web 应用程序。我已经通过-webkit-overflow-scrolling: touch; 实现了新的 iOS 原生滚动，并且一切正常，除了我们仍然在整个页面正文上体验苹果弹性滚动效果。

这涉及到当滚动结束或主体被推动时整个页面从视口的顶部/底部移开，并真正暴露了这是一个网络应用程序的事实。我关注了various guidelines 如何防止这种情况，虽然它们确实有效，但它们会完全阻止内部可滚动元素的工作。

Here's a fiddle 演示我目前使用的内容。

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

【问题讨论】：

我注意到禁用 $(document) 的 touchmove 已被注释掉。这是故意的吗？
是的。如果您取消注释所有滚动将被禁用。对不起，我应该提到这一点。

标签： javascript css ios webkit scroll

【解决方案1】：

我已经使用 Dojo 改编了来自 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。

【讨论】：

你确定这有效吗？我无法在小提琴上复制这个工作......想知道这是否确实是一个正确的答案
对我来说仍然很有效。
在 IOS 7 中，此代码只会在页面滚动超过其边界一次后阻止弹性滚动。例如： 1. 你向下滚动：它过度滚动 2. 你再次向下滚动：没有过度滚动 3. 你向上滚动：它过度滚动 4. 你向下滚动：它过度滚动 5. 你向下滚动：没有过度滚动 6. 你向下滚动：没有过度滚动

【解决方案2】：

也许iScroll 是您正在寻找的东西（如果我的问题正确的话）

【讨论】：

iscroll 的问题在于它不是原生的，据我所知，它仅在容器上实现滚动。 webkit 溢出滚动允许在容器上进行原生触摸滚动并且效果很好。但是无论你选择什么滚动方案，苹果弹性体滚动仍然存在。
实际上，iScroll 并没有受到它的影响，我认为它进行了修复，它基本上禁用了所有滚动，然后将其处理程序添加到顶部以启用它的滚动。我正在考虑自己做类似的事情，但只是让原生滚动继续。

【解决方案3】：

冒着重复我的帖子的风险，我尝试解决同样的问题，到目前为止只有这么远：

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

如果您的溢出元素没有覆盖整个屏幕，例如在 iPad 应用程序中，则此方法有效。但如果您有一个移动应用程序并且整个视口都被溢出的元素覆盖，则它不起作用。

我唯一能想到的就是检查 $('.scrollable') 的 scrollTop()，如果它是 0，则有条件地绑定 preventDefault()。

在尝试之后，我注意到当元素滚动到顶部时，webkit UA 总是将 scrollTop 报告为 0，即使它执行了本机溢出滚动的“内部反弹”。所以我什么也做不了，因为我需要一个负的 scrollTop 来设置我的条件。

叹息。令人沮丧。

【讨论】：