Geek asks and answers

Horizontal gesture swipe and vertical page scroll

I am creating a mobile site, and I have a slide show with images that allows me to slide horizontally through the images. The javascript library I'm using is bxslider. However, if you touch a slide show and want to scroll up / down, the slide show blocks vertical scrolling and, therefore, you need to touch another part of the site.

Can someone please tell me how vertical scrolling can be enabled (i.e., do not allow slide shows to block normal scrolling?)

Thank!

+5
source share
2 answers

Try this, change onTouchMovefn in the library bxsliderto

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

        }
    }
+3
source

- bxslider, preventDefaultSwipeX DefaultSwipeY

, .

+1

More articles:


All Articles