Jump to content
Search Community

Draggable : vertical scroll (overflow-y: auto/scroll) inside horizontal Draggable element not possible ? (touch devices)

Webls test
Moderator Tag

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

Hello,

 

After looking online and on this forum, I create this new post to see if anyone had the same issue with GSAP Draggable.

 

As you can see on the screenshot below,

I use a Draggable instance with type: x to create a main horizontal scrollview.

 

Inside this scrollview, there are several boxes which all have a vertical native scrollview, using css properties : overflow-y: scroll; -webkit-overflow-scrolling: touch;

 

It seems there is a conflict between horizontal Draggable events and native browser scroll when this scroll applies inside Draggable element.

 

It is not possible to drag the mainview if the touch event is fired inside the native scrollview; only native vertical scroll is working.

 

(if you drag on the header, which have no scroll, Draggable horizontal scroll works, but if you try to drag horizontally on the grey block, no horizontal scroll occured)

 

gsap-scrollview-issue.jpg

 

 

- The issue occured on touch devices : Chrome Android, Firefox. The issue can be reproduced on latest Chrome Desktop with Touch simulated

- It works on Safari iOS devices (iOS9, 10+)

 

 

You can reproduce the issue on the codepen below; 
You will need to simulate touch events to reproduce.

 

I tried to enable/disable "allowNativeTouchScrolling" but the issue is the same.

 

 

Do you have any idea how to fix that ?

The only solution should be to apply a Draggable instance to replace each native scrollviews, but may have performance issues on low Android devices.

 

Thanks for your help.

See the Pen JEQGjK by webls (@webls) on CodePen

Link to comment
Share on other sites

Hello Jack,

 

The issue occured only on Chrome Desktop and Chrome Android

 

The vertical native scroll and draggable horizontal drag work perfectly together on iOS (Safari, Chrome) and Android using Samsung Browsers (chromium based)

 

Draggable instance should allow native touch events (such vertical scroll with overflow: auto; css properties) for all chrome versions ?

Link to comment
Share on other sites

Hi again,

 

In fact, i was wondering why Draggable don't let native scroll for opposite axis when I declare a single axis :

 

If I declare Draggable type: x (without lockAxis) for the mainview, Why all css vertical native scrollviews (using overflow-y: scroll)  inside this draggable are blocked ?

 

Moreover, it works perfectly on some browsers and os (even Chrome iOS)

That's why i Insist on that issue because I am almost sure there is a solution :-)

 

 

Please note that I've just tried to create Draggable instances, with type:y for each scrollviews included in the main Draggable scrollview and its works ! But as expect there is performance issues on old Android devices.

So I am still testing / looking for a solution.

 

Thanks a lot.

Link to comment
Share on other sites

I'm pretty sure that will. Make sure you are using the latest scripts. DO NOT use the lastest scripts. That feature is no longer supported. Use version numbers instead.

https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.1/TweenMax.min.js
https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.1/utils/Draggable.min.js

And I'm not sure about your html/css. You might need to change some of that The only time I use a list is when I need an actual list. 

 

If that doesn't work, you could probably build some sort of scrim to drag on and sort out the axis. 

Link to comment
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.
×
×
  • Create New...