Horizontal scroll like IPhone 14 Website

Hey,
I try to built a „side Content“ Like the „Deep Dive“ form Apples iPhone 14pro Website.

In the Main Content wrapper u Can Get more Information about something. So there for u can klick a Button → the Main content moves -100vw and the side Information Content slides in viewport. The side content is horizontal scrollable and when u read the hole horizontal content u can klick on a button there to bring the Main content back in viewport an the side Content moves 100vw out of the viewport.

My Problem is, that i want that the side horizontal scroll Content does Not scroll anymore when the content is at the end. With the normal sticky horizontal scroll the Content scrolls After the section.

Tried the horizontal section With overflow scroll without a sticky Element that scrolls 300vw horizontal. But i cant scroll the overflow scroll section With the Mouse

Is there a workaround?

Tim :slight_smile:


image