Ok so I have this project, both versions uploaded to github in the following links.
Overflow1 when scrolling past the portfolio point, the text moves in. Main issue is when you try to emulate smartphone, or just go on a regular phone, you can scroll to the side…
Overflow2 uses the main fix where you just add ‘overflow-x:hidden’ and ‘width:100vw’ to html and body or whatever.
While this works, the portfolio skewed text doesn’t move in anymore when scrolling (I do this with scroll top and percentages etc.) I have also had other projects where adding overflow-x hidden to body and html creates hickups and lag when scrolling onto images for the first time after reloading. Without the hidden overflow, it’s perfectly smooth (only mobile makes you scroll horizontally). I then tried to put it in a wrapper instead of html and body, same thing…
https://stevenphotos.github.io/overflow1/
https://stevenphotos.github.io/overflow2/
Are there other ways to disable horizontal scrolling? I’ve tried setting scrollLeft to 0 when detecting scroll in javascript, however the same thing happens on mobile, you can scroll all the way to the right and THEN scrollLeft = 0 decides to kick in…
Here’s source code:
https://github.com/StevenPhotos/overflow1
https://github.com/StevenPhotos/overflow2
Thanks