MobileSafari（iOS Safari）：有没有办法防止水平/垂直滚动“捕捉”？答案

【问题标题】：MobileSafari (iOS Safari): Is there a way to prevent horizontal/vertical scroll "snapping"?MobileSafari（iOS Safari）：有没有办法防止水平/垂直滚动“捕捉”？
【发布时间】：2012-12-20 15:09:10
【问题描述】：

我有一个 Web 应用程序，它显示 2D 图表的可滚动视图，我试图让用户更轻松地让视图始终跟随手指。

默认行为是大多数滑动动作都会导致垂直或水平受限的移动，这对阅读文本很有帮助，但对我的用例来说不是那么大。

编写自定义触摸事件代码来直接设置滚动是一种可能性，但这使得恢复滚动势头变得困难。此外，原生功能能够在幕后做一些特殊的事情，比如暂停 JS 操作并避免重新渲染，这有助于整体性能。

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

【问题讨论】：

请澄清一下，你想要动力吗？
我确实想要动力。我不想要方向约束。
您的页面是否只包含图表？ O

标签： ios css html ipad mobile-safari

【解决方案1】：

我还没有找到指定行为的方法，但我发现当我放下手指而不移动它然后在一秒钟后开始移动它时，它可以让我向各个方向滚动。

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

【讨论】：

我从不止一个人那里听说过握住手指的时间更长会触发它，但每当我测试时，情况并非如此。在我看来，仅考虑了初始运动的方向。在选择功能弹出之前，我可以将它按住直到 just，然后直接向下移动，然后在剩余的触摸中垂直限制它。我的怀疑是，用户在稍微长一点的按住后更倾向于做对角拖动。
嗯，我认为你是对的。我只是更仔细地测试了一下，似乎只要我的滑动不在水平或垂直轴的一定程度内，我就可以向各个方向滚动，无论我最初的触摸有多长或多短。

【解决方案2】：

你可以让图表溢出页面大小：

#diagram{
    width: 2000px;
}

所有其他部分都应该修复：

#menu, etc{
    position: fixed
}

这样你可以使用页面本身的滚动，没有方向限制。

为防止 iPad 调整内容大小以适应设备宽度，您将其添加到 <head>：

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

【讨论】：

这个答案并没有解决这个问题：除非你小心最初沿对角线移动手指，否则它会限制它。
“页面本身的滚动”默认有方向约束。