Question

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

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

Here's a fiddle来展示我到目前为止所使用的内容。

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

Answer 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。

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，即使它执行本机溢出滚动的“内部反弹”。所以我不能做任何事情，因为我需要一个负面的scrollTop来设定我的条件。

叹息。令人沮丧。

禁用iOS弹性体滚动＆amp;保持原生滚动工作

3 个答案: