jquery移动侧边栏没有预期拖动

Question

我正在开发一个在页面后面有固定边栏的手机屏幕应用，但我发现了行为问题。

侧边栏已隐藏，用户可以通过点击菜单图标查看。当用户点击他的图标时，页面向右移动，它显示了一个次要z-index的侧边栏。

如果用户想要关闭菜单，他必须将页面的可见部分拖到左侧。

我的问题是在侧边栏中我有一个可垂直滚动的块。它运行正常，但问题是，如果我在此元素中放置.scroll（overflow-y：scroll; -webkit-overflow-scrolling：touch;）类，并且用户从右向左水平滑动侧边栏和页面开始拖动。

我们正在使用snap.js进行侧边栏交互。

我想禁用此拖动。我尝试使用CSS并防止水平滚动，但它不起作用。

我附上一张照片以获取更多视觉细节。

Answer 1

使用iScroll5进行滚动。 然后挂钩到onScrollStart事件：

myScroll.on('beforeScrollStart', function(event)
    {
        if (isPanelOpen){
            myScroll.disable();
        }
        else{
            myScroll.enable();
        }
    });

或者 - 如果你不想使用iScroll5，你可以设置一个全局bool，它表示一个面板是否打开（无论如何你都必须这样做）。 如果Panel处于打开状态（意思是，你显示侧边栏），请在snap.js中将bool设置为true - 这意味着，你必须调整snap.js. 然后，在touchmove上，检查bool是否为真。然后你知道，一个面板是打开的，你可以在touchmove上做一个event.stopPropagation，以防止事件冒出来被snap.js识别，并避免面板过早关闭。

Answer 2

WOOP！我们找到了它！

问题是我们正在使用.scroll类捕获每个元素的touchmove事件，并且我们正在停止它的传播。

我们注意到，当我们尝试启动水平滚动时，所有页面都像拖动一样移动，所以我们添加了这个CSS属性：

html，body，.ui-mobile .ui-page-active {overflow-x：hidden; }

而且......工作正常！

P.S。我们实际上并不需要任何元素中的水平滚动，所以，这对我们来说没问题。