MobileSafari（iOS Safari）：有没有办法阻止水平/垂直滚动“对齐”？

我有一个Web应用程序，它显示一个2D图的可滚动视图，我试图让用户更容易让视图始终按照手指。MobileSafari（iOS Safari）：有没有办法阻止水平/垂直滚动“对齐”？

默认行为是这样的，大多数的滑动运动导致垂直或水平约束的运动，这对阅读文本很有帮助，但对我的用例来说并不那么重要。

编写自定义触摸事件代码来直接设置滚动是一种可能性，但这使得很难恢复滚动动力。另外，本地功能可以在幕后做一些特殊的事情，比如挂起JS操作并避免重新渲染，这有助于整体性能。

是否有可以控制方向控制行为的CSS样式？

2012-12-20 Steven Lu

PLS clearify，你想势头与否？ – 2012-12-20 15:40:39

我确实需要动力。我不想要方向性约束。 –

你的页面只包含图表吗？ O – 2012-12-20 15:46:52

我还没有找到一种方法来指定行为，但我发现，当我将手指放下而未移动时，然后在一秒钟后开始移动它，它将允许我在各个方向上滚动。

也许看看如果iScroll或类似的东西会适合你，因为它包括动量，你可以明确指定是否要锁定方向。

2012-12-20 15:36:30 freejosh

我从一个以上的人那里听说，长时间握着手指的东西会触发它，但每当我测试时都不是这样。在我看来，*只考虑初始移动的方向。在弹出选择功能之前，我可以将它保持到*仅*，然后直线向下移动，然后在触摸的其余部分垂直限制它。我的猜测是，用户在稍微长一点的时间后会更倾向于做对角线拖拽。 –

嗯，我认为你是对的。我只是进行了更仔细的测试，似乎只要我的轻扫不在水平或垂直轴的某个角度内，就可以向各个方向滚动，无论我的初始触摸有多长或多短。 – freejosh

可以使图溢出的页大小：

#diagram{ 
    width: 2000px; 
}

所有其他部分应该是固定的：

#menu, etc{ 
    position: fixed 
}

这样，您就可以使用页面本身的滚动，有没有定向约束。

为了防止iPad来调整内容以适应设备宽度你<head>补充一点：

<meta name="viewport" content="initial-scale=1, user-scalable=no, width=2000px">

2012-12-20 15:52:03

这个答案没有解决这个问题：它限制了它，除非你**仔细**最初对角线移动你的手指。 –

默认情况下，“页面自身的卷动”具有方向性约束。 –

回答