captivationsoftware/react-sticky

Doest not work with inner scroll

zhbhun opened this issue · 3 comments

zhbhun commented

I'm submitting a ...

  • bug report
  • feature request
  • support request

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?

  • Version:
  • Browser:

Is there anything else I should know?

vcarl commented

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

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.

  • 👍1
Zveroboev commented

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.