issue reactour highlighting webpart unwanted offset

[livain18]

Hi i'm using version reactour v1.19.1.

In a sharepoint page containing different webparts to highlight with reactour. I'm having a problem where if the highlight container needs to move vertical outside the viewport then there's an unexplicable offset to the top or bottom where the container is not scrolled in place. And it seems I can't solve the problem by using inViewThreshold, scrollOffset or observe, highlightedSelectors, resizeObservables, mutationObservables or highlightedSelectors on the steps itself. Also Removing certain topbars won't help/ The calculations that are made to calculate the size and scrollview are not correct I think. It could be fixed by adding something like a scrollable region that can be passed to the component. Because it takes whole of the body as scroll region while not whole viewport height is always scrollable (think of sticky headers / footers with a certain scrollable region). Maybe the cause can be something else but it has something to do with height calcualtions based on viewport height.

These are some of the screenshots:

1. correct when going to a step inside viewport
2. wrong when going to a step outside viewport

[elrumordelaluz]

Hi @livain18, thanks for open the Issue.

Mind creating a minimal reproduction in a sandbox in order to allow others to debug your use-case and try to find a solution? Thanks!

[livain18]

Hi it is a sharepoint environment where this specific problem comes up with a large codebase. I don't have an idea how it can be reproduced in a sandbox environmnent. Is it okay to show you a print screen recording?

[lucbpz]

Any updates on this?

This is reproducible on any example, like this one. If I make the screen small enough to get some scroll, when scrolling, the mask moves:

[elrumordelaluz]

@lucbpz the logic to lock/unlock scroll is in user-land, using afterOpen and beforeClose props, like in this example which uses body-scroll-lock lib.