gn90 Posted April 12, 2022 Share Posted April 12, 2022 Hi again, just wanted to ask if there are any solutions to get a horizontal Scrolltrigger to work on mobile? Or are there any good concepts on how to approach this? Haven't found something in the forums about this. I am not an javascript pro so i hope there is some easy going solution for this. Thanks in advance, Gui See the Pen KKZBprM by gn90at (@gn90at) on CodePen Link to comment Share on other sites More sharing options...
mvaneijgen Posted April 12, 2022 Share Posted April 12, 2022 I've opened your pen on my phone and it works as expected and scrolls horizontally, what are you having issues with? Link to comment Share on other sites More sharing options...
gn90 Posted April 12, 2022 Author Share Posted April 12, 2022 Oh sry i meant the "handling" to drag the screen to the side and not up/down. so its more intuitive. So if the user scrolls sideways it will acually scroll. Thanks, Gui Link to comment Share on other sites More sharing options...
Solution mvaneijgen Posted April 12, 2022 Solution Share Posted April 12, 2022 Mmh, it feels weird, you are the one that is disabling the horizontal scroll with `body { overflow-x: hidden; }` can't you just remove that line of CSS on mobile so it scrolls horizontal like you want? There is not really need to hack the scroll bar if you just want your site to scroll its natural way. On PC you are correct in implementing a fix, because not all devices can scroll horizontally, but on mobile you don't need that fix or am I missing something? 3 Link to comment Share on other sites More sharing options...
gn90 Posted April 12, 2022 Author Share Posted April 12, 2022 Ohh ok that was the problem. Thank you for your quick help. So i will just remove the overflow hidden on mobile. thanks! Link to comment Share on other sites More sharing options...
gn90 Posted April 12, 2022 Author Share Posted April 12, 2022 Sry to bother you again. I tried it out right now but when i try to scroll to the side it does and immediately jumps back. Link to comment Share on other sites More sharing options...
akapowl Posted April 12, 2022 Share Posted April 12, 2022 Hello @gn90 @mvaneijgen's suggestion will probably only work if you are going to not have that fake-horizontal-scrolling ScrollTrigger active on mobile - you can handle different ScrollTriggers for different media-queries via ScrollTrigger.matchMedia() btw. If you are still going to have that ScrollTrigger active on mobile, you will have to implement a draggable-solution for it to also work when swiping left/right - like this demo from the ScrollTrigger-How-To Collection on codepen does. See the Pen ZELQqeJ by GreenSock (@GreenSock) on CodePen Happy scrolling! 4 Link to comment Share on other sites More sharing options...
mvaneijgen Posted April 12, 2022 Share Posted April 12, 2022 I've wrapped your code in a `ScrollTrigger.matchMedia` and set it to the value you also define in your code (992px) and I've updated your CSS to make the scroll visible on 991px one pixel before the javascript kicks in. So right now all your javascript is disabled on small screens and only starts working when the browser size is 992px in width. Maybe that is not correct, but it shows you the logic you can work width See the Pen MWrBNNN?editors=0110 by mvaneijgen (@mvaneijgen) on CodePen There a also a lot of horizontal scroll demo's on https://greensock.com/st-demos/ (search for "horizontal") this one has the effected mapped to only horizontal scrolling See the Pen JjYPgdp by GreenSock (@GreenSock) on CodePen 4 Link to comment Share on other sites More sharing options...
gn90 Posted April 12, 2022 Author Share Posted April 12, 2022 thank you both of u guys! will take a look on both solutions and will try my best to implement it to my page. Appreciate your help! Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now