How does LV implement their product column scrolling
Hi guys,
I am working on an ecom store for a client and for desktop, they wanted the same 2-column scrolling layout as Louis Vuitton.
Example:
https://au.louisvuitton.com/eng-au/products/nano-frivole-monogram-nvprod7830229v/M29537
However, I'm really struggling to figure out how the scrolling is implemented.
I tried doing this:
Left: image gallery stacked as full-viewport-height slides (h-[calc(100svh - header)]). Scrolls with the window.
Right: position: sticky aside (50% width) with an inner div that has max-height: calc(100svh - header) + overflow-y: auto; so product info scrolls in its own container.
To make both sides feel like one scroll, I added a hook usePdpPanelScrollChain that:
- On window scroll: moves the right panel by the same deltaY (1:1)
- On panel scroll: calls window.scrollBy with the same delta
- On wheel over the panel: if panel is at top/bottom, passes scroll to the window
Also set overscroll-behavior: none on html/body when .pdp-scroll-layout is present to reduce native scroll chaining.
But it still feels off and I think I am over-complicating it. I feel like there is a more native way I can approach this. Appreciate the help in advance and let me know if more info is required