Modal Issue Scrolling to a specific <Div> on Villa Page

[lighthama2]

Hello @flo and @Joyce and all the community !

Thank you for your help today at the weekly session.

I made a Loom explaining the issue I’m facing when trying to scroll to specific specific

on Modal component open on top of the Villa page.

Could you please watch it and provide your advice?

Here’s the link: Modal Issue Scrolling on Villa Page | Loom

Thank you very much for your assistance !

[Alexis]

Hi @lighthama2

How your link are built ? You want to scroll inside the modal but link can only target a section outside of the modal so I’m wondering

Also some people tend to disable the scroll on the body when a modal is open, maybe it can help you

Disable scroll on body when modal is launched

Just found the solution… thank you @luka !!

[lighthama2]

Hello Alexis,

Our link are build using the following approach :

1. we click on a button it opens a modal → a custom script is launch in order to disable the scroll when the modal is open (as mentioned into the forum)
2. the modal is open with a menu selection on the top, when we click into a choice (introduction, bedrooms, location) → a JS script is activated to scroll to the position of the according div using the following snippet :

function scrollToElement() {
    let access = wwLib.getFrontDocument().getElementById("bedrooms_div");
    if (access) {
        let offsetPosition = access.getBoundingClientRect().top + wwLib.getFrontWindow().pageYOffset - 40;
        wwLib.getFrontWindow().scrollTo({
            top: offsetPosition,
            behavior: "smooth"
        });
    }
}

// Call scrollToElement() directly without interval
scrollToElement();

3. nothing happen
4. on close we have the script at the level 2. which is reactivated in order to take back the scrolling control of the Parent page.

That’s it

[Alexis]

I think you have to call scrollTo on the modal element containing everything, and not on the front window

Try to get the right element and call the scrollTo on this element instead

[flo]

Hi @lighthama2,

I managed to reproduce your use case:

I added an Id for the scrollable container, and another one for the title 4:

Then I went back to the top navigation in the modal, and I added a workflow on the text Title 4:

There is indeed an issue with the selected element. We still have many wrappers that we are going to remove in the coming months.

For now, what you can do is to add parentNode to select properly the container you are scolling into, like this:

It should fix your issue!
Tell me if it works for you.

Keep in mind that you may need to remove this parentNode in the coming months when we remove all wrappers (we will send emails to warn you all). By the way, when we do this, you’ll all have 40% less elements in your DOM. So your app will be loaded faster!

[lighthama2]

Yayyy ! Thank you Florian, it works like a charm.

I’d like to be notify when tag will be cleaned

But in the meantime, it does the job perfectly.

Thank you again,

Best,

Lighthama