How to add a custom element?

I’m currently challenging Wix for my future website and one of the thing that I need in this website is some sections where, when scrolled, display an animation, frame-by-frame. I wrote a component in the form of a standalone JS script plus and HTML markup and a CSS stylesheet, but I can’t find a way to add it to my Wix site.

Additionnally, I’m unable to access the global window object from Velo and this is required to listen to the “scroll” event - I have an error “ReferenceError: window is not defined” when executing addEventListener on the global window object.

Can someone show me the right direction to add custom elements to my site?

Note that using a Custom Element creates an…iframe, which prevent me to access the parent window and listen to the scroll event.

Did you ever find a solution to this? I am dealing with a similar issue trying to change the state of a container on scroll.

What exactly do you want to change?
What are you trying to achieve ?

Note that using a Custom Element creates an…iframe, which prevent me to access the parent window and listen to the scroll event.

Not sure if this is correct.

I definitely would be very happy to be proven wrong. Do you have an idea on ho to listen to scroll even on an iframe?

The question is…

  1. Do you want to listen to SCROLLING on Wix-Page and send over to iFrame?
  2. Or oposite → from iFrame to Wix-Page ?

**What are you trying to achieve? **
a) Horizontal scrolling?
b) some kind of responsive function?
c) something else?

This way you get the scrolling-position…

…on wix-page.

And here the oposite version … from iFrame to → Wix-Page…

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Scroll Position Example</title>
    <style>
        body {
            height: 2000px; /* Add enough content to enable scrolling */
        }
    </style>
</head>
<body>

    <p>Scroll down to see the console log.</p>

    <script>
        window.addEventListener("scroll", () => {
            let scroll = window.scrollY;
            console.log("Current Scroll Position:", scroll);
        });
    </script>

</body>
</html>

Put this into your HTML-Component.

Write some additional code to connect HTML with Wix.
Data-Transfer-Communication.