css - jquery 移动侧边栏不是预期的拖动

Question

我正在开发一个 phonegap 应用程序，它在页面后面有一个固定的侧边栏，我发现了一个行为问题。

侧边栏是隐藏的，用户可以通过点击菜单图标看到它。当用户点击他的图标时，页面会向右移动，并显示位于次要 z-index 中的侧边栏。

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

我的问题是在边栏中我有一个可以垂直滚动的 block 。它工作正常，但问题是，如果我将 .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 值，它指示面板是否打开(无论如何您都必须这样做)。如果一个面板是打开的(意思是，你正在显示侧边栏)在 snap.js 中将 bool 设置为 true - 这随后意味着，你必须调整 snap.js。然后，在 touchmove 上，检查 bool 是否为真。然后你知道，面板打开了，你可以在 touchmove 上执行 event.stopPropagation 以防止事件冒泡以被 snap.js 识别并避免面板过早关闭。