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

时间:2013-02-05 14:16:15

标签: javascript jquery bxslider

我正在建立一个移动网站,我有一个图像幻灯片,可以水平滑动图像。我正在使用的javascript库是bxslider。但是,如果有人触摸幻灯片并想要向上/向下滚动页面,幻灯片会阻止垂直滚动,因此必须触摸网站的另一部分。

有人可以告诉我如何启用垂直滚动(即,不允许幻灯片显示阻止正常滚动?)

谢谢!

2 个答案:

答案 0 :(得分:3)

试试这个,将onTouchMove库中的bxslider fn更改为此

        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);
            }

        }
    }

答案 1 :(得分:2)

如果您转到bxslider网站的选项页面,请搜索preventDefaultSwipeX,以及preventDefaultSwipeY

这些都是你要找的。