MobileSafari(iOS Safari):有没有办法阻止水平/垂直滚动“捕捉”?

时间:2012-12-20 15:09:11

标签: ios css html5 ipad mobile-safari

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

默认行为是大多数滑动动作导致垂直或水平约束运动,这有助于阅读文本,但对我的用例而言则不是那么多。

编写自定义触摸事件代码以直接设置滚动是一种可能性,但这使得很难恢复滚动动量。此外,本机功能能够在幕后执行一些特殊操作,例如挂起JS操作并避免重新渲染,这有助于提高整体性能。

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

2 个答案:

答案 0 :(得分:1)

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

也许可以查看iScroll或类似内容是否会对您有用,因为它包含动量,您可以明确指定是否要锁定方向。

答案 1 :(得分:1)

您可以使图表溢出页面大小:

#diagram{
    width: 2000px;
}

应修复所有其他部分:

#menu, etc{
    position: fixed
}

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

要阻止iPad调整内容大小以适合设备宽度,请在<head>中添加:

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