1

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

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

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

上述原因return false：我不希望身体在您滑动时移动，这是默认的移动 safari 行为。

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

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

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

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

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

4

2 回答 2

0

你需要改变一些事情。您的代码正在做它应该做的事情。由于正文封装了您应用-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;
    }
});
于 2013-08-11T04:21:00.510 回答
0

对不起，因为这个问题很老了。但我来这里是为了寻找我刚刚找到的解决方案。也许它可以帮助某人。

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

因此，应用 event.preventDefault ：

<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>
于 2016-01-21T17:35:09.303 回答