Make sticky elements that "unstick" once the content of the scrolling container is over?

Question

I’m building a chat-like layout in React. Each MessagePair contains:

HorizontalResponseOptions: fixed height, never overflows.

Response: has max-height and overflow-y: auto.

As the user scrolls the outer , I want:

HorizontalResponseOptions to remain visible (like a sticky header).

The inner Response content to scroll automatically, without requiring the user to hover it.

When a Response is fully scrolled, continue scrolling to the next MessagePair.

It should work smoothly in both directions.

Example code:

<FlexDiv>
 {pairs.map(p => (
 <MessagePair key={p.id}>
 <Query />
 <HorizontalResponseOptions />
 <Response>{p.text}</Response>
 </MessagePair>
 ))}
</FlexDiv>

I've been fiddling around with many options, but couldn't achieve this in a native way nor using IntersectionObservers and Scroll Hijacking.

Expectation:

• In a vertically stacked chat UI, each MessagePair has a fixed-height HorizontalResponseOptions and a scrollable Response (max-height, overflow-y:auto).
• Desired scrolling behavior:
• When the user scrolls the outer FlexDiv, the wheel/touch input should be intercepted and applied to the currently visible Response (no hover/focus on Response required).
• While Response can still scroll, only Response moves and HorizontalResponseOptions stays visible (sticky behavior).
• When Response reaches its boundary (top/bottom), remaining scroll delta should propagate to the outer container to reveal the previous/next MessagePair.
• Must work both up and down, with mouse wheel and touch, in modern browsers.

Any help is appreciated!

• cjl750: Partial answer: I got this partially working by wrapping each message in an invisible div that covers the entire width of the screen (using negative margin left + padding left) and making that div the one that scrolls. So the whole screen is covered in invisible scrolling divs. The problem is the browser doesn't automatically move scrolling from the div to the window and back when you reach max/min scroll. You need to either move the mouse or stop for a sec then restart scrolling. (I was testing on desktop w/ mouse wheel.) Finding some way to programmatically solve that could be your ticket.