[Vertical page scroll prevented]

I had tested on a number of devices and browsers, I have found the issue, it was generating slides with the css style for "touch-action: none" which prevented the scroll from working, I overrode this in my scss file to be "pan-y" and it is now working as expected. I think this is worth noting as this should probably get resolved as this was a nightmare to locate the cause and fix.

[Vertical page scroll prevented]

I can't create a code-pen the code is all using c# for values and variables, equally the images are stored securely on IP restricted connections, there isn't a need to view the demo anyway I just need to know how to allow vertical scrolling of the web page when clicking and dragging vertically on the slider section.

 

This is the draggable code is there is a value I need to change

It fully prevents the web page being scrolled over on mobile as it only allows the horizontal scroll, I obviously don't want that because it is useless to the web pages functionality, I am surprised whatever is doing it is set up this way in the first place.

 

var w_width = $(window).width();
var position_obj = [];
const slider = document.querySelector('.slides');

var half_w_width = w_width / 2;
$('.slide').each(function () {
    position_obj.push($(this).offset().left);
});

$(document).ready(function () {
    if ($('.slides').length === 0) {
        return;
    }
    Draggable.create(".slides", {
        type: "scrollLeft",
        edgeResistance: 0.9,
        maxDuration: 1.2,
        minDuration: 1.2,
        lockAxis: true,
        onThrowUpdate: function () {
            var wrapper_left = this.x * -1 + half_w_width;

            $(position_obj).each(function (i, val) {
                obj_c = i + 1;
                if (val < wrapper_left) {
                    $('.slide').removeClass('active');
                    $('#slide_' + obj_c).addClass('active');
                }
            });
        },
        snap: function (e) {
            var span_window_w = $(window).width();
            return -Math.round(Math.round(e / (.3 * span_window_w)) * (.3 * span_window_w)); // This changes the threshold for dragging and snapping the obj's
        },
    }), TweenMax.set(".slides", {
        overflow: "scroll"
    }), $(".slides").scroll(function () {
        $(".parallax").each(function () {
            var leftOffset = $(this).offset().left;
            var element_w = $(this).width();

            leftOffset < w_width && leftOffset + element_w > 0 && TweenLite.to($(this), 1.2, {
                xPercent: (w_width - leftOffset) / w_width * $(this).attr("data-velocity"),
                overwrite: 0
            });
        });
    });
});

[Vertical page scroll prevented]

Hi,

 

I have a draggable horizontal carousel, but on mobile it prevents the vertical scroll of the webpage.

How do I stop it from only allowing horizontal scroll across the slider? When a user drags their screen to move down the page if they have the slider section on their screen it won't allow them to get further down the website?

 

- This seems like a silly issue so I am aware I am probably missing something simple, any help is appreciated.

 

Thanks

Kieran