search

captivationsoftware / react-sticky

<Sticky /> component for awesome React apps
MIT License
2.64k stars 386 forks source link

Doest not work with inner scroll #282

Open zhbhun opened 5 years ago

zhbhun commented 5 years ago

I'm submitting a ...

If you're reporting a bug, please provide a minimal demonstration of the problem

https://codesandbox.io/s/93xyo7z66o

https://github.com/captivationsoftware/react-sticky/blob/master/src/Container.js#L66 should support custom scroll container.

What is the current behavior?

Sticky does not work with inner scroll div

What is the expected or desired behavior?

Sticky does work with inner scroll div

Why do you want this? What use case do you have?

What is your environment?

Is there anything else I should know?

vcarl commented 5 years ago

Oh interesting, I see what's going on. What would you propose as a solution, a prop for a DOM node to listen to for scroll events? Like, scrollingNode with a default of window?

zhbhun commented 5 years ago

StickContainer add new propps scrollingNode(DOM node), or should use react createRef. I can also support a new Context Component prodivde scrolling node for StickyContainer.

I found Sticky support relative that StickyContainer is a scrollable node. There is a issue at https://github.com/captivationsoftware/react-sticky/blob/master/src/Sticky.js#L63, If parent position is relative or absoute, eventSource.scrollTop should't plus eventSource.offsetTop. Here is issue demo https://codesandbox.io/s/yvy2m66x9x.

So, I think Sticky does't need relative mode, just StickyContainer provide a way to custom scroll node.

Zveroboev commented 4 years ago

I have the same problem. I need to set custom node for the StickyContainer, because in one of the cases my app works with scroll inner the div at the top level.