禁用iOS弹性体滚动和保持本机滚动正常工作

Question

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

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

这是一个小提琴来演示我到目前为止所使用的内容。

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

Answer 1

我已经采用了 Conditionally blockscrolling/touchmove event in mobile safari using Dojo 的良好解决方案：

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

冒着重复我的帖子的风险，我尝试解决同样的问题，到目前为止仅此而已：

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

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

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

尝试后，我注意到webkit UA报告scrollTop总是为0即使元素执行本机溢出滚动的“内部弹跳”，也会滚动到顶部。所以我不能做任何事情，因为我需要一个负的滚动顶部来设置我的条件。

叹。令人沮丧。