Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Kieran

Vertical page scroll prevented

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

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

Link to post
Share on other sites

Hey Kieran and welcome to the forums.

 

Can you please provide some more information about how your Draggable instance(s) is created? A basic demo of your issue would be very helpful. Please see the below thread for more information about how to create a minimal and complete demo:

 

Link to post
Share on other sites

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

Link to post
Share on other sites

By asking for a demo, I did not mean that you have to put your production code in CodePen. I am asking you to recreate your setup and see if you can reproduce the bug :) 

 

By default, Draggable instances should let you scroll in the opposite direction of the draggable direction (so in this case scrolling vertically should be allowed). To test whether or not this is the issue, you can set allowNativeTouchScrolling: true for your Draggable instance.

 

Have you tested whether or not this happens on all mobile devices and browsers or just some?

Link to post
Share on other sites

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.

Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    No registered users viewing this page.

×