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

[lighthama2]

Good morning,

I’m facing an issue, when I click a second time on the title header.

The issue, is that the scroll goes to the top position and stays there.

The expected behaviour is to have it stay at the same position.

In order to scroll to the according section I’m using the tactic that @flo uses.

The process assigns an id called container to the Gallery Images element, allowing the script to use it as a parentNode to navigate and scroll to a specific position also tag with an id within the container.

While doing it, my page does goes to the according position but if I click again on the same button it starts to behave strangely.

Basically it goes to the top again and stops.

–

Here is the structure I use, as you can see the title menu doesn’t have ID itself :

But it does have a workflow :

Here is the code I put into the workflow in order to scroll to the `location` position :

let container = wwLib.getFrontDocument().getElementById("container").parentNode;
let access = wwLib.getFrontDocument().getElementById("location");

if (container && access) {
    let offsetPosition = access.getBoundingClientRect().top;
    container.scrollTo({ top: offsetPosition, behavior: "smooth" });
}

Here is the setup of my container :

Here is the setup of the Location section with it’s ID sets to location :

Here is a demo of the behaviour : https://www.loom.com/share/a1838146208e4a73b7ac7e44b1f5a298?sid=33f28e16-fb81-4b3b-810e-9eff647af092

I think there is a mistake in the JS script in a way that it tries to access the parentNode on the second clicks which is used as a reference and stop, there third click goes to the correct section again.

I’d like your advice on this please.

Thank you very much in advance for your help,

Best,