e.preventDefault（）导致webkit移动溢出失败

Question

我正在努力解决整个周末一直困扰着我的问题。

在移动webkit上（我的情况下是Safari iOS 5.1）当我在禁用默认行为的正文中放置任何内容时，我无法保持-webkit-overflow-scrolling:touch行为。

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

上面return false的原因：当你在它上面滑动时，我不希望身体移动，这是默认的移动游侠行为。

小提琴1 - 触摸溢出在中间框中与所有文本一起工作，但身体也移动，我不想要： http://jsfiddle.net/MeLxg/1/

小提琴2 - 现在通过在mousemove事件上返回false来修复正文，但溢出不再起作用，您无法滚动文本框： http://jsfiddle.net/MeLxg/2/

QR码为了您的方便（毕竟它是移动的，使用您的扫描仪）

仅

小提琴1 视图面板 http://jsfiddle.net/MeLxg/1/show/

---

仅

小提琴2 视图面板 http://jsfiddle.net/MeLxg/2/show/

Answer 1

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

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;
    }
});

Answer 2

对不起，因为这个问题已经过时了。但我来到这里寻找我刚刚找到的解决方案。也许它有助于某人。

我有同样的问题，需要保持不移动身体的preventDefault行为，但想要一个很好的-webkit-overflow-scrolling：touch;为了div。

所以，aply event.preventDefault with：

<script>document.ontouchstart = function(e){ e.preventDefault(); } </script>

然后在你要滚动的div中：

<div class="nicescrolldiv" ontouchstart="document.ontouchstart = function(e){ return true; }" ontouchend="document.ontouchstart = function(e){ e.preventDefault(); }" style=" overflow: scroll !important; -webkit-overflow-scrolling: touch !important;"></div>