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…
- Do you want to listen to SCROLLING on Wix-Page and send over to iFrame?
- 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.