首页 > 解决方案 > 如何阻止hammer.js与正常滚动冲突

问题描述

我使用hammer.js 来检测拖拽和滑动。

那是代码:

var element = document.getElementById('pinwall-grid');
                    var hammertime = Hammer(element).on("drag", function (event) {
                        direction = event.gesture.direction;
                        if (direction == 'left') {

                            var $meN = $('.pinwall-grid .ctrl a.next');

                            if (!$meN.hasClass("nextD")) {
                                $meN.trigger('click');
                            }

                            console.log('left');


                        } else if (direction == 'right') {

                                var $meP = $('.pinwall-grid .ctrl a.prev');

                                if (!$meP.hasClass("prevD")) {
                                    $meP.trigger('click');
                                }

                                console.log('right');
                            }

                    event.gesture.stopDetect();
                });

如果您在移动设备上上下滑动并且您的手指在我使用hammer.js 定位的div 上,它不会向下或向上滚动视口。

使用 chrome 在移动设备上查看http://86.62.248.112/en/以查看我在说什么,将手指放在最新消息 div 上并滑动。

我该如何解决?

提前致谢。

标签: javascriptjqueryhammer.js

解决方案


如果有人面临同样的问题,

首先你需要更新你的hammer.js 版本,然后添加touch-action:pan-y到有问题的div。


推荐阅读