locomotive scroll == no dialog windows?

[piscopancer]

When I attempt to change an element to be scrolled by the locomotive it just does not work. I could see a workaround on the v5 docs using event listeners for a wheel, but it's such a mess I could not imagine writing this in my own app.

I also tried below code in Lenis before, same thing. There is absolutely no reaction from these libraries whatsoever 😕.

export function LocomotiveScroll() {
    const { locomotive, locomotiveContainer } = useGlobalSnapshot()

    useEffect(() => {
        store.locomotive = ref(new Locomotive())
    }, [])

    useEffect(() => {
        locomotive && store.locomotive!.destroy()
        store.locomotive = ref(new Locomotive({ el: locomotiveContainer || undefined }))
    }, [locomotiveContainer])

    return <></>
}

My question is simple: how do you work with dynamic elements popping up, eg dialogs, modals? I have no idea why destroying and isntance and recreating it with an el set to the dialog scrollable container has no reaction 😕.

[devenini]

Hey! Have you tried to either add data-lenis-prevent on the dialog popup or to use our workaround?

[piscopancer]

@devenini hey. data-lenis-prevent - I did not know that, where do I use that 🤔?

[devenini]

Hey! Sorry for the late reply. To prevent the scroll event from being caught by Lenis, you can add data-lenis-prevent to a div. This is typically used for elements like modals, popups, or nested scroll elements.

[tariknh]

hey looks like you are using nextjs, i made a fix for the v5 where you can just implement this https://github.com/locomotivemtl/locomotive-scroll/issues/506#issuecomment-1753957274

Thats all there is to it. I got it working for app router next 14. If you have questions let me know

[tschelovek]

Hey! Have you tried to either add data-lenis-prevent on the dialog popup or to use our workaround?

Thank you! This helped me to fix scrolling my mobile burger menu. Searching in documentation I've just skipped "Third Party Injected..." so didn't find solution myself.