Horizonal Scroll + GSAP - Mobile Resets to Top

[ShaneFry]

Hello 👋

I am having a very weird issue and was wondering if anyone has come across something similar. I know a lot of people use horizonal scroll sections with Locomotive + GSAP so I am asking here.

Issue: I have a horizontal scroll section that works amazing on desktop, but when I try on mobile or tablet devices the moment the scroll finishes, it gets pulled back to the top. It basically resets the scroll to 0 (The top).

Here is the code pen with the exact code: (The issue wont happen on mobile inside the codepen, youll have to visit my website) https://codepen.io/cassie-codes/pen/ZEeeyOX/7663b55b05f5d473c0e61732fb9174b4

Here is the issue on my live server so you can see the behavior: https://shanefry.com/test

https://user-images.githubusercontent.com/118708070/209584653-a1829480-e54e-4783-993e-f5954fae5190.mp4

[Marghen]

Same issue here, exactly the same as you. Even using smooth: false for mobile and tablet doesn't solve it, The only solution I found is to not enable locomotive scroll from mobile, but I'd like a real solution. It seems to be happening only when the scrolling stops by itself (if you stop the scroll with a tap it works fine).

Did you ever find a solution? Thanks

[ShaneFry]

Hey Marghen,

Not sure if this is the correct solution but it seemed to work for me!

const scroller = new LocomotiveScroll({
  el: pageContainer,
  smooth: true,
  getDirection: true,
  mobile: {
    breakpoint: 0,
    smoothMobile: true,
    getDirection: true,
  },
  tablet: {
    breakpoint: 0,
    smooth: false,
    getDirection: true,
  }

});

And the line of code that seemed to fix it all was: (Make sure its the very last line of code in your JS or it may not work)

ScrollTrigger.config({ignoreMobileResize: true});

To save you some time as well, the horizontal scroll breaks on tablet if the orientation is switched. I found just reloading the page will reset all your values (Not ideal, but works):

let portrait = window.matchMedia("(orientation: portrait)");

portrait.addEventListener("change", function(e) {
  //alert("screen change");
  scroller.update();
  location.reload();
})

I do remember adding this line of CSS awhile back that could be part of the fix. I don't think it is, but give it a try if the above doesn't work:

 html.has-scroll-smooth {
    bottom: 0;
    left: 0;
    overflow: hidden;
    position: fixed;
    right: 0;
    top: 0;
}

You can dive into my code here: https://shanefry.com/

[Marghen]

Thanks man, you saved me quite a lot of debugging:

ScrollTrigger.config({ignoreMobileResize: true});

This did the trick, thank you again