turn off for inner pages

[NiceDice]

Hi,
I've built a react horizontal scrolling gatsby site that utilises this package, I've also used reach/router to load in the inner pages. When these pages are loaded the overrides are still happening on the html tag, so the internal pages will not vertically scroll.

Is there any way to disable for the inner pages?
I've tried creating a new instance that allows vertical scrolling but it doesn't seem to work.

Cheers.

[jariz]

I'm not 100% sure what you mean, but have you tried using the container option from your "inner pages" instead?
Example.

[NiceDice]

Hi - I tried the container option with the hook but I think something in Gatsby stops it working and I'm not sure how to debug it as there are no errors.

Here's my site - with the simple viewport setup: https://romantic-stonebraker-36fdeb.netlify.app/
If you scroll to the case studies section and click one to load another page - when it loads a case study it needs to vertically scroll but it doesn't because the html tag has the overscroll-behavior: auto none; - so what I need is to turn off the useHorizontal() so the case study can vertically scroll.

Or, if I could use the container option this would be more suitable - however, something funky in Gatsby stops that working.

[NiceDice]

Hi again,

Just to follow up, I found a solution... it isn't pretty but it works!
So for context - the issue I was having was that the only method to get the horizontal scroll working was the simple version wrapped in a media query:
const isDesktop = useMediaQuery('(min-width: 835px)'); { isDesktop ? new HorizontalScroll() : null; }

The container method just simply didn't work and I don't have the skills to debug it.

However, in Gatsby when you navigate to another internal page it uses @reach/router, so it just hotswaps the content on the body tag - with the simple horizontal method I used it adds classes to the html tag... so, the horizontal method was being passed to the child pages which are standard vertical scrolling pages.

To get around this, in Gatsby I changed the page button tags from to a normal this forces Gatsby to think it is loading a fresh external page and therefore the did not contain the classes that this package adds.

Hope this helps anyone with a similar problem in the future.
And BTW this horizontal scrolling package is by far the best in terms of performance on GPU and smoothness - great work folks!

Cheers.

[rynmgdlno]

I'm having the same issue but in a different context. I've used the react hook implementation in a container in such a way that my header is static while the content "pages" scroll or swipe horizontally (imagine a typical single page portfolio site but horizontal).

The issue is the "sub-containers" which are meant to be scrolled vertically, don't respond to mouse scroll, meaning while trying to vertically scroll say a div containing text, instead it scrolls into the next "page" horizontally. On mobile the element is still scrollable and responds fine to touch, just isn't receiving scroll input from the mouse.

I'm assuming there is something blocking the standard browser behavior (element not receiving mouse input) so maybe there's a quick work around to grant mouse focus on hover.