Skrollr 页面上的移动导航栏水平滚动答案

【问题标题】：Mobile navbar horizontal scroll on Skrollr pageSkrollr 页面上的移动导航栏水平滚动
【发布时间】：2016-09-20 23:14:14
【问题描述】：

我的移动导航栏位置固定在屏幕底部并溢出到右侧。我希望能够水平滚动，但是，skrollr 似乎正在捕获滚动事件并将其转换为垂直滚动。

禁用 skrollr 后，我可以水平滚动导航栏。

我尝试将导航栏的 zindex 设置得尽可能高，但 skrollr 仍然会对其进行触摸。

这可能吗？

编辑：

想上传一个我想要实现的草图以使其更清晰。

叠加层位置固定，位于屏幕底部，z 索引在所有内容之上，其内容向右溢出：

white-space: nowrap; overflow-x: auto; overflow-y: hidden;

在移动设备上，拖动叠加层会开始滚动整个页面，并且叠加层不会左右滚动。如果我使用鼠标水平滚轮，它会滚动，但不能触摸。

【问题讨论】：

【解决方案1】：

通过停止在覆盖元素上的touchmove、touchstart 和touchend 事件的传播来解决此问题：

$overlay.on('touchmove touchstart touchend', function(e) { e.stopPropagation(); });

这破坏了对覆盖层内的任何链接的点击，但为它们添加了一个虚拟侦听器修复了它：

$overlayLinks.on('touchmove touchstart touchend', function() { return true; });

【讨论】：