Sooova Posted February 14, 2022 Share Posted February 14, 2022 Hey all, I've recently dabbled with making a mock website using horizontal scrolling of GSAP, and i've encountered a problem which i'm unsure why is occuring. The site works perfectly on desktop, and even at the same resolutions as mobile when touch input is disabled, but when it is enabled the horizontal scroll breaks as well as some other things such as AOS which also breaks. I'm unsure why it occurs. Putting it up on code-pen doesn't show the problem, however the github repo below has a live github pages link and the code can be seen there as well: https://github.com/Sooova/Validus-Studios-Concept the github pages link is here: https://sooova.github.io/Validus-Studios-Concept/ if someone could help me out i would be so greatfull!!!!! See the Pen PoOKyMJ by sooova (@sooova) on CodePen Link to comment Share on other sites More sharing options...
Solution OSUblake Posted February 14, 2022 Solution Share Posted February 14, 2022 Welcome to the forums @Sooova It's really hard to troubleshoot a live site, but just by inspecting your site in the responsive dev tools, it looks like you might need the overflow-x hidden to be hidden so it doesn't scroll. Notice the horizontal scrollbar. 1 Link to comment Share on other sites More sharing options...
Sooova Posted February 14, 2022 Author Share Posted February 14, 2022 hey thanks for the reply @OSUblake. Yeah i've already tried putting that, it just wasn't deployed yet!!! I'm really baffled. I've re-edited the intial post and added a code-pen, but i don't think you can see the problem in code-pen, only when on dev-tools response with touch enabled, or on a mobile device. Link to comment Share on other sites More sharing options...
Sooova Posted February 14, 2022 Author Share Posted February 14, 2022 If it helps, i will say that changing the width of the class: 'horizontaParent' to 100% brings back some of the scroll behaviour but obvious not how i want it to be but yeah thanks all!!!! Link to comment Share on other sites More sharing options...
Sooova Posted February 14, 2022 Author Share Posted February 14, 2022 @OSUblakeHey, i wholeheartadly take my statement back! You were absolutely correct. One thing i failed to take into account, is that on mobile devices, overflow-X:Hidden is ignored if it is in the body tag. I just wrapped everything over a main div and applied it to that instead. thank you so much for your help! 3 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