捕获水平滑动并阻止水平滚动

Question

我正在尝试为响应式页面实现滑入式菜单，该页面在设备尺寸较小时显示。我使用Bootstrap Simple Sidebar并添加了一个顶部工具栏，当屏幕宽度很小时会出现，它有一个用于滑入或滑出菜单的按钮。一切顺利。

我现在正尝试使用向左滑动和向右滑动手势触发事件滑入或滑出菜单。我添加了JQuery Mobile（仅包含事件的自定义构建）。 事件触发正常，我的代码看起来像这样。

<script>
    $(document).on("swiperight",function(e){
        if ($('.smallscreen-toolbar').is(':visible')) {
            e.preventDefault();
            if (!$("#wrapper").hasClass("toggled"))
            {
                $("#wrapper").addClass("toggled");
            }
        }
    });

    $(document).on("swipeleft",function(e){
        if ($('.smallscreen-toolbar').is(':visible')) {
             e.preventDefault();
            if ($("#wrapper").hasClass("toggled"))
            {
                $("#wrapper").removeClass("toggled");
            }
        }
    });
</script>

我遇到的问题是，在向左滑动手势（关闭菜单）期间，页面（将向右偏移）执行水平滚动。当我使用Chrome的模拟器对其进行测试时，我也收到了以下错误消息：Ignored attempt to cancel a touchmove event with cancelable=false, for example because scrolling is in progress and cannot be interrupted.，我认为这是相关的。

我正在尝试使用e.preventDefault()取消活动。这不是正确的方法吗？ 如何阻止水平滚动事件（不阻止垂直滚动）？

我还尝试将overflow-x: hidden放在html，body和<div>包装我的内容，但当其边距向右偏移时（菜单为我仍然可以拖动它并移动它。如果我将事件绑定到touchmove并在其中执行e.preventDefault()，我会阻止所有操作，包括滑动。