水平滑动手势和垂直页面滚动 [英] Horizontal swipe gesture and vertical page scroll

问题描述

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

I am building a mobile site and I have a slide show of images that allows sliding through images horizontally. The javascript library I'm using is bxslider. However, if one touches the slide show and wants to scroll the page up/down, the slide show blocks vertical scrolling and hence another section of the site must be touched.

有人可以告诉我如何保持垂直滚动(即不允许幻灯片阻止正常滚动吗?)

Could someone please tell me how I could keep vertical scroll enabled (i.e, not allow the slideshow to block the normal scroll?)

谢谢！

推荐答案

尝试一下，将bxslider库中的onTouchMove fn更改为此

Try this, Change the onTouchMove fn in the bxslider library to this

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

        }
    }

这篇关于水平滑动手势和垂直页面滚动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！