HammerJS平移强制在垂直滚动上强制水平事件，或禁止一起滚动

Question

我正在为网站上的翻页效果制作动画。

我需要使用HammerJS平底锅测量手指行进的距离，滑动显然不支持这一点。

然而，它打破了一个非常具体的错误：

https://github.com/hammerjs/hammer.js/issues/1056

我的左右平底锅完美无缺，但是当我想要＆＃34;滚动＆＃34;用手指向下翻页，它打破了。页面跳转并认为它是一个左摇动事件。

有没有人想出如何使用可滚动的元素并且仍然有左右平移？不能看到这是锤子修复。

如果我添加各种修复程序，如：

        var swipe = new Hammer(page);

        swipe.get('pan').set({ direction: Hammer.DIRECTION_ALL });

垂直触摸滚动根本不起作用。

继承我的代码：

            var page = document.getElementById("main-page");
            var swipe = new Hammer(page);

            swipe.get('pan').set({ direction: Hammer.DIRECTION_ALL });

            var width = (50 / 100) * page.offsetWidth;
            var language = $('body').attr('lang');

            delete Hammer.defaults.cssProps.userSelect;
            swipe.on('pan', function (e) {
                //4 = left
                if (e.direction === 4) {
                    if(document.getElementById("prevpagebutton")){
                        page.style.transform = 'translateX(' + e.deltaX + 'px)';
                        if(e.distance > width/3){
                            $('#snackbar').length === 0 ? JS.common_functions.snackBar(3000,'<i class="fa fa-arrow-left" aria-hidden="true"></i>', 0) : '';
                            if(e.distance > width){
                                document.getElementById("prevpagebutton").click();
                            }
                        }
                    }
                    else{
                        $('#snackbar').length === 0 ? JS.common_functions.snackBar(3000, JS.common_functions.translate('startOfBook', 
JS.language.navigation, language), 0, 0) : '';
                    }
                }
                    //2 = right
                if (e.direction === 2) {
                    if(document.getElementById("nextpagebutton")) {
                        page.style.transform = 'translateX(' + e.deltaX + 'px)';
                        if(e.distance > width/3){

                            $('#snackbar').length === 0 ? JS.common_functions.snackBar(2000,'<i class="fa fa-arrow-right" aria-hidden="true"></i>', 0) : '';
                            if(e.distance > width){
                                document.getElementById("nextpagebutton").click();
                            }
                        }
                    }
                    else{
                        $('#snackbar').length === 0 ? JS.common_functions.snackBar(3000, JS.common_functions.translate('endOfBook', 
JS.language.navigation, language), 0, 0) : '';
                    }
                }
                if(e.eventType === 4){
                    page.style.transform = 'translateX(' + 0 + 'px)';
                }
            });