停用iOS弹性体滚动和放大保持本机滚动工作 [英] Disabling iOS elastic body scroll & keep native scrolling working

问题描述

我目前正在为触摸设备（主要是iOS）优化的单页网络应用程序。我通过 -webkit-overflow-scrolling：touch; 实现了新的iOS本机滚动，并且所有工作都很好，除了我们仍然经历苹果弹性滚动效果

I am currently working on a single page web app optimized for touch devices, mainly iOS. I've implemented the new iOS native scrolling via -webkit-overflow-scrolling: touch; and all works well except that we are still experiencing the apple elastic scroll effect on the whole page body.

这涉及到整个页面在滚动结束或移动时移动到视口的顶部/底部，并真正释放这是网络应用程序。我已遵循各种指南了解如何防止这种情况，并且在他们开始工作时，防止内部可滚动元素一起工作。

This involves the whole page moving off the top/bottom of the viewport when a scroll ends or the body is pushed and really gives away the fact that this is a web app. I have followed various guidelines on how to prevent this and while they do work, they prevent inner scrollable elements from working altogether.

这里是一个小提琴来演示我的

有没有人发现一个解决方案禁用正文弹性滚动，但允许内部滚动工作？

Has anyone found a solution that disables body elastic scrolling but lets inner scrollables work?

推荐答案

我已经从有条件地阻止移动safari中的滚动/ touchmove事件调整了好的解决方案使用Dojo：

I've adapted the good solution from Conditionally block scrolling/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。

The element to be scrolled is #content in this case.

这篇关于停用iOS弹性体滚动和放大保持本机滚动工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！