javascript - e.preventDefault()导致webkit mobile溢出失败

Question

我正在尝试解决一个困扰我整个周末的问题。

在移动 webkit 上(我的情况是 Safari iOS 5.1)当我在 body 中放置任何禁用默认行为的东西时，我无法保持 -webkit-overflow-scrolling:touch 行为正常工作.

$('body').on({
    touchmove : function(e){
        //e.preventDefault(); // I played with these as well
        //e.stopPropagation();
        return false;
    }
});

上面 return false 的原因:我不希望 body 在你滑动时移动，这是默认的移动 safari 行为。

Fiddle 1 - 触摸溢出在包含所有文本的中间框中起作用，但主体也会移动，这是我不想要的: http://jsfiddle.net/MeLxg/1/

Fiddle 2 - 正文现在通过在它的 mousemove 事件上返回 false 来修复，但是溢出不再起作用，你不能滚动文本框: http://jsfiddle.net/MeLxg/2/

为您提供方便的二维码(它是移动的，毕竟，使用您的扫描仪)

Fiddle 1 仅查看面板 http://jsfiddle.net/MeLxg/1/show/

---

Fiddle 2 仅查看面板 http://jsfiddle.net/MeLxg/2/show/

Answer 1

您需要稍微改变一下。您的代码正在做它应该做的事情。由于 body 封装了您将 -webkit-overflow-scrolling:touch 应用到的任何元素，因此可滚动的 div 或任何无法滚动的内容，因为它在 body 中。也许您可以通过创建一个虚拟元素来获得类似的效果，该虚拟元素只是为了跨越整个设备的宽度和高度，该元素将捕获您想要滚动的此 div 之外的任何触摸移动事件。

http://jsfiddle.net/ericjbasti/MeLxg/3/

// added html
<div id="stopTouch"></div>


// added css 
#stopTouch{
   position: absolute;
   height: 100%; 
   width: 100%;
   background: rgba(0,0,0,.1); // just so i can see its filling the screen
}

// changed js
$('#stopTouch').on({
    touchmove : function(e){
        //e.preventDefault();
        //e.stopPropagation();
        return false;
    }
});