请使用移动设备看一下:

http://jsfiddle.net/stratboy/tk6ztzku/1/

这是我正在构建的画布原型。请为混乱的CSS打扰一下:它是具有导入功能的Scss的编译版本。此外,它还缺少导入字体。

无论如何,它是可行的。红色按钮可打开子菜单。但是在移动设备上有一个问题:在打开子菜单之前,您可以向左/向右滚动菜单,或者更好地拖动菜单。打开子菜单后,它可以正常工作(这意味着您不能向左/向右拖动enymore,只能向上/向下拖动)。

因此,也许有某种原因使它停止,我想找出并使用它来停止从一开始的横向拖动。在代码上没有什么特别的:js只是添加/删除类(它实质上是几乎纯css offcanvas),而类仅添加翻译:

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


(伪代码,否则他们不允许我添加jfiddle链接)

我试图用零翻译初始化.menu-box,但是不起作用。

任何想法?

最佳答案

好。这只是部分答案,我仍然想知道如何真正停止移动设备上的横向拖动。

无论如何,翻译是不正确的:它不会停止任何事情,而是由于其他原因而停止了。

为了解决我的问题,我只是消除了横向滚动的真正原因:内容溢出。因此,我基本上隐藏了init(第34行)上的所有子菜单:

this.submenus.hide();


(对不起,我必须添加一些虚拟代码以添加jfiddle链接...)

工作版本是这样的:

http://jsfiddle.net/stratboy/tk6ztzku/4/

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

在最新的Chrome,Firefox,Safari,Safari,Android 4.x,最新的ios(即9-11)上进行了测试

10-05 20:44
查看更多