How to add a custom element?

Ask the community
1

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?

2

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

3

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.

4

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

5

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.

6

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?

7

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.