Kieran

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.

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

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