在移动设备上滚动对角线

Question

问题：

我正在开发一个需要div宽度为＆gt;的项目。 100％在移动设备上（想想平板电脑）。在典型的桌面上，宽度大会吹出身体，并显示滚动条。在移动设备上，它会将所有内容缩小到适合视口内部。结果我把这个大div包含在一个包含div的'overflow：scroll'中。这按预期工作，以便我可以拖动元素。但是，在这样做时，我只能在X和Y上滚动，而不能在对角线上滚动。

目前，我没有使用任何视口元标记，但我尝试了以下内容：

<meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=1' name='viewport' />
<meta name="viewport" content="width=device-width" />

的 TL; DR： 的

我的代码如下所示

<div style="overflow:scroll">
  <div style="width:400%"></div>
</div>

我只能在X或Y上滚动，而不能在对角线上滚动。

编辑：添加JS作为标签，因为我不反对JS解决方案，虽然我更喜欢轻量级的东西。