Webls

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.

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 ?

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) - 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.

Hi all, does anyone got this issue before ? Thanks a lot.

Hi again, do you have any idea how I can fix that issue ? Thanks for your help.

Hello Jonathan, I created the codepen, available here : http://codepen.io/webls/pen/WREarq The issue can be reproduced on Safari, iOS9, 10+ on iPhone and iPad Thanks.

Hello all, I am working with draggable plugin to create a carousel which includes one (or several) HTML5 video inside each pane. I found an issue on iphone (iOS 9, 10+) devices when user goes to fullscreen for video and then exit fullscreen. As you will see in the example below, when you leave fullscreen on iPhone, drag stop working. The fix I found, (which is not a fix by the way!) is to add a "touchend" event in order to call Draggable.endDrag() which bring back the scroll (but it means you need to drag once to be able to scroll after ! (I tried to call startDrag en "touchstart" event but it didn't work. The best way would be to call Draggable.dradEnd() when video exits fullscreen but as we cannot listen to video enter/exit fullscreen on iOS, it is not possible I noticed that if i remove the viewport meta tag, drag works perfectly after exit video fullscreen, but same, it is not a solution. Do you have any idea how to fix that ? Thanks ! Issue can be reproduced here : http://codepen.io/webls/pen/WREarq

Hi all, this is my first post on this forum. I am working on a mobile calendar which requires to manage a large horizontal drag area combined to a important vertical scroll for a mobile web application (in webkit browser : Safari / Chrome) You will find a mockup attached to this post in order to understand what i am trying to do. This calendar has : - on left side : a vertical list of people (called "fixedView") - on right side : a vertical list of blocks which has a horizontal scrollview (using Draggable) in order to swich days by using drag gesture on axis : x (called "InnerView") These two sides are embedded in a "mainView" which is the page container for calendar. (Please have a look to attached file). In fact, i am trying to use a horizontal Draggable (InnerView) into a container which has a vertical scroll (mainView) I made a lot of research , check mobile performances (Galaxy S3 mini to iPhone5) and tests to try : "Scroll In Scroll" : Adding a vertical Draggable for mainView + Adding a horizontal Draggable for InnerView it "works badly" but don't know how to control vertical & horizontal in order to "lockAxis"; right now you can do diagonal drag which is not good (and bad perfs of course) moreover : with this method, i removed native scroll (provide by webkit with -webkit-overflow-scrolling: touch; which brings low perfs on vertical scroll => My Conclusions :using Greensock Draggable to manage vertical scroll is not possible cause we have very bad perfs on low devices I have to use native scroll provided by webkit for vertical scroll (best perfs.) and use Draggable for horizontal scroll (in InnerView) only Do you agree ? So, this is the problem i can't resolve : When i create a new Draggable for InnerView (params below) with {type : "x"}, i can't do a vertical scroll anymore (for sure). What i would like to do is to detect when user is doing a horizontal or vertical scroll on InnerView (by a swipe or drag gesture) . If User is scrolling horizontaly => we use Draggable Instance for InnerView only if User starts scrolling verticaly => we use a "prevent default" for Dragable to release touch bind and so let the browser do a native vertical scroll (webkit) So for this 2nd point, i don't know how to do this. (I had a look on google, GSAP forums, Docs...) I tried to bind the event with onDragStart method but didn't get it. Do you this this is the right approach ? I cant use a Draggable instance with {type : "x,y"} because it would mean that only "InnerView" will scroll vertically but in our case we need to scroll the entire mainview (which include FixedView + InnerView => so the mainView I had a look to "scrollLeft" and "scrollTop" properties and several code pens but i am still blocked. Hope my post is understandable; if you need more details, do not hesitate. Here Draggable Instance for InnerView : innerView = Draggable.create(innerViewEl, { type : "x", bounds : targetStageEl, throwProps : true, force3D : params.stage.force3D, edgeResistance : params.stage.edgeResistance, dragResistance : params.stage.dragResistance, // dragClickables : true, lockAxis : true, // zIndexBoost : false, snap: { x: function(endValue) { return Math.round(endValue / contextInterface._width) * contextInterface._width; } } }); Here DraggableInstance for MainView (bad perf for vertical scroll) mainView = Draggable.create(mainViewEl, { type : "y", bounds : {minY:0, maxY:-3000}, //SimulateLongScroll throwProps : true, force3D : false, // params.stage.force3D, edgeResistance : params.stage.edgeResistance, dragResistance : params.stage.dragResistance, dragClickables : true, lockAxis : true }); Thanks in advance.