Question

请使用移动设备查看：

这是我正在建造的一个offcanvas原型。请原谅我杂乱无章的css：它是带导入的scss的编译版本。还缺少导入的字体。

无论如何，它有效。红色按钮打开子菜单。但是在移动设备上有一个问题：在打开子设备之前，您可以“滚动”或更好地拖动菜单左/右。打开子菜单后，它工作正常（意味着你不能向左/向右拖动，只能向上/向下拖动）。

所以，也许有一些东西让它停下来，我想找出并用它来阻止从一开始就横向拖动。在代码上没有什么特别之处：js只是添加/删除类（它基本上和几乎纯粹的css offcanvas），而类只是添加翻译：

  &.submenu .menu-box{
    @include translate(-$off_canvas_width, 0);
    @include translate3D(-$off_canvas_width, 0, 0);
  }

（虚拟代码，否则他们不允许我添加jfiddle链接）

我尝试使用零翻译初始化.menu-box但不起作用。

有什么想法吗？

Answer 1

行。这只是一个部分答案，我仍然想知道如何真正阻止移动设备上的横向拖动。

无论如何，翻译的事情并非如此：它不会阻止任何事情，它会因其他原因而停止。

为了解决我的问题，我简单地消除了横向滚动的真正原因：内容溢出。所以我基本上隐藏了init上的所有子菜单（第34行）：

this.submenus.hide();

（对不起，我必须添加一些虚拟代码来添加jfiddle链接......）

工作版本如下：

请注意，我还在主体中添加了一个无滚动类，但这与原始问题无关：它只是为了防止在菜单滚动结束时滚动主体。

测试了最新的chrome，firefox，safari，android 4.x，最新的ios，即9-11