I'm rendering some react content in a page via a plug-in so I have no control over the parent page that uses my content. The thing is that sometimes I use componentDidMount lifecycle to scroll to a specific element in my page.

There are cases where the parent page is using modals for consent (RGPD ones) when a page is loading, so my content is correctly loading and my componentDidMount and my scrolling method are running. Except that the page that is rendering this modal is blocking the scroll. Even when the modal is closed, my function already ran so it does not scroll.

I thought about listening for some changes with MutationObserver but it will not make it consistent as there is multiple "parents" that can render my content so as many different MutationObservers to set.

I also thought about maybe another lifecycle method that could detect if my content is blocked of partially rendered or something.

I simply have no idea about how to approach this issue.

Here is some code :

componentDidMount = () => {
        if (typeof window !== "undefined") {
            const pageAnchor = window.location.hash.slice(1);
            const argumentRegex = /argument_\d+/;
            const argumentAnchor = pageAnchor.match(argumentRegex);
            if (argumentAnchor) {
                const argumentId = this.getId();
                if (argumentAnchor[0] === argumentId) {
                    scroller.scrollTo(argumentId, { duration: 1000, smooth: false, offset: -80 });
                }
            }
        }
    };