0

I have two pages Home (vertical scrolling) and About (horizontal scrolling), im trying to use smooth scrolling but im facing some issues.

If i navigate from Home to About, the horizontal scrolling stops working on About page. refreshing the About page, makes the horizontal scrolling working again.

So ive remade a minimal version to check what could be the issue, and i found that import "../assets/locomotive-scroll.css"; is the issue, ive tried multiple things, loading the css depending on route, lifecycles..

Replicate the issue

  1. Open project and preview in new tab (default preview seems that smooth scrolling is not working)
  2. Smooth scrolling on Emojis is working in Home
  3. Navigate to About by clicking on the "Go to About"
  4. Verify horizontal scrolling is not working (refreshing page makes it work again)
  5. Remove import "../assets/locomotive-scroll.css";
  6. Smooth scrolling on Emojis stops working, but horizontal scroll on About is working

codesandbox.io link (open preview in new tab)

zemmsoares
  • 313
  • 1
  • 8
  • 27

1 Answers1

0

Just figured out, i had to use locomotive on About with direction: horizontal insteada the GSAP.

const scroll = new LocomotiveScroll({
    el: document.querySelector('[data-scroll-container]'),
    smooth: true,
    direction: 'horizontal',
});
zemmsoares
  • 313
  • 1
  • 8
  • 27