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

Question

4

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

默认情况下，大多数滑动手势会导致垂直或水平受限制的移动，这对于阅读文本非常有帮助，但对于我的用例来说不太方便。

编写自定义触摸事件代码以直接设置滚动是一种可能性，但这使得恢复滚动动量变得困难。此外，本机功能能够在幕后执行一些特殊操作，如暂停JS操作和避免重新渲染，从而提高整体性能。

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

- Steven Lu

请澄清，您是否需要动量？ - user920041

我想要动量。我不想要方向限制。 - Steven Lu

你的页面只包含图表吗？O - user920041

2个回答

1

我还没有找到指定行为的方法，但我发现当我放下手指不动一秒钟后开始移动它，它会允许我在所有方向上滚动。

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

- freejosh

我从不止一个人那里听说过，长按手指会触发某些操作，但每当我测试时都不是这种情况。在我看来，只有初始移动方向被考虑在内。我可以一直按住它，直到选择功能弹出，然后向下直线移动，然后它就会在接下来的触摸中垂直约束。我怀疑用户在稍长时间的按住后更容易进行对角线拖动。 - Steven Lu

嗯，我想你是对的。我刚刚进行了更仔细的测试，似乎只要我的滑动不在水平或垂直轴的某个角度范围内，无论我的触摸起始点有多长或短，我都可以在所有方向上滚动。 - freejosh

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- user920041 · Accepted Answer

您可以使图表超出页面大小：

#diagram{
    width: 2000px;
}

所有其他部分应该固定：

#menu, etc{
    position: fixed
}

这样您就可以使用页面本身的滚动条，而不受方向限制。

为了防止iPad调整内容以适应设备宽度，您需要在<head>中添加以下内容：

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