I feel like I’m going insane trying to solve this, and can’t figure it out…
I want the hero/top section to NOT scroll horizontally (just vertically)
I want the second section (photos) to a) stick at 0 and b) scroll horizontally (via horizontal scroll animation - which is actually a vertical scroll)
I then want the third second to NOT to scroll horizontally (just vertically)
Note:
- The problem seems to be that if I turn overflow OFF for the parent element, the sticky / nor the scroll will work
- If I leave overflow ON, it does what you see in the link (wants to scroll horizontal and vertical)
- I’ve tried wrapping everything in a div without overflow (it prevents the horizontal scrolling - but also on second section)
- I’ve tried wrapping first section in div without overflow and not the second, but it still scrolls horizontally while in the first section
- I’ve tried max width to 100vw
- Currently my “horizontal track” is 400vw in height - the length of all 4 photos at full viewport
- I’ve tried publish vs unpublish
Please help!
Here is my site Read-Only: LINK
(how to share your site Read-Only link)