水平滑动手势和垂直页面滚动

Question

我正在构建一个移动站点，其中有一组图片幻灯片，允许水平滑动查看图片。我使用的javascript库是bxslider。但是，如果用户触摸幻灯片并想要上下滚动页面，幻灯片会阻止垂直滚动，因此必须触摸站点的另一部分。

请问有人能告诉我如何保持垂直滚动启用（即不允许幻灯片阻止正常滚动吗？）

谢谢！

- Sorin Cioban

---

有人已经在GitHub上开了一个关于这个问题的issue，最好跟进那里的进展。 - Mottie

Answer 1

尝试这个，将 bxslider 库中的 onTouchMove 函数更改为以下内容。

        var onTouchMove = function (e) {
        if (slider.settings.mode != 'fade') {
            var orig = e.originalEvent;
            var value = 0;
            // if horizontal, drag along x axis
            if (slider.settings.mode == 'horizontal')
            {   
                var hchange = orig.changedTouches[0].pageX - slider.touch.start.x;
                var vchange = orig.changedTouches[0].pageY - slider.touch.start.y;

                if(Math.abs(hchange)>20 && Math.abs(hchange)>Math.abs(vchange))
                {   
                    value = slider.touch.originalPos.left + hchange;
                    setPositionProperty(value, 'reset', 0);
                    e.preventDefault();
                }
                // if vertical, drag along y axis
            } else{
                e.preventDefault();
                var change = orig.changedTouches[0].pageY - slider.touch.start.y;
                value = slider.touch.originalPos.top + change;
                setPositionProperty(value, 'reset', 0);
            }

        }
    }

- Bhadra

Answer 2

如果您前往bxslider网站的选项页面，搜索preventDefaultSwipeX和preventDefaultSwipeY，那就是您要找的内容。

- devon