not referring the elements when scrolling time. it is stick at the browser

[RajasekharReddy82]

Describe the bug & Expected behavior A clear and concise description of what the bug is. passed id to xarrows its is working good but when i am trying to scroll it is not scrolling for that element it fixed at same position and i am using positons relative and absolute in my components not using any fixed positions.

To Reproduce Steps to reproduce the bug: what props where used, in what way the lib was used?
provide preferably minimal code snippets/codesandbox/gitpod.

Screenshots If applicable, add screenshots to help explain your problem.

[stoney95]

I am facing the same issue. @RajasekharReddy82 did you already find a way to resolve this?

I took a screenrecording with the example from the ReadMe. In Mozilla Firefox and Chrome it looks like this: https://user-images.githubusercontent.com/34100018/162848286-002e7e5f-f9fe-40cb-8ea6-3ad56b8cfac7.mov

[stoney95]

@RajasekharReddy82 I could fix my problem, I will share in case it is relevant for you too. I tried before with something like this:

import Xarrow, {useXarrow, Xwrapper} from 'react-xarrows';

const SomeComponent = () => {
     const updateXArrow = useXarrow();

     useEffect(() => {
        window.addEventListener("scroll", updateXArrow)
        return () => window.removeEventListener("scroll", updateXArrow)
    })

    return (<div className="container">
        <Xwrapper>
            <Draggable onDrag={updateXArrow}><div id="elem1">element 5</div></Draggable>
            <Draggable onDrag={updateXArrow}><div id="elem2">element 6</div></Draggable>
            <Xarrow start="elem1" end="elem2"/>
        </Xwrapper>
    </div>)
};

The problem for me was that SomeComponent was placed in a scrollable container itself. This way the event window.scroll was not triggered and thus arrows were not updated. I resolved this by triggering window.scroll when the scrollable container was scrolled. You could also onScroll of the container directly if this suits your use case

[PahanPerera]

If you set position: "relative" in the container that holds the arrows, It would do the trick