Trigger scroll inside a HTML component

Ask the community
,
1

We need to trigger a scrolling within our HTML Component. It works using an external iframe (we hosted it on GitHub), but it wouldn’t scroll in Wix.

Is it because of the different location hash?

2

Hi,
You can use Messaging to send a message from the iFrame to the page itself and use the scrollTo function to scroll to the relevant Anchor .

Good luck!
Tal.

3

Thanks Tal, however the positions of the elements are within our iframe, and they are dynamic based on what we need the HTML iframe to render.

We have thought about putting anchor at the relevant positions but realised the reason above right afterwards…

4

Sorry, I misread your question. Basically, you can use the Messaging to send a message to the iFrame. In order to scroll within the iFrame, you would need to code this within the iFrame code. I found this thread which may be helpful. Note that the coordinates are related to the iFrame size and not the page size.

Good luck,
Tal.

5

Thanks Tal. Our HTML component has the scrollTo function implemented already, and it works if put to an iframe on a non-Wix site. But if we put the same HTML component to an iframe on our Wix site, the scrollTo function inside our HTML is called, the window.scrollTo(x, y) is triggered, but it wouldn’t scroll since Wix’s iframe is sandboxed.

6

We have implemented a messy workaround:

  1. Get the calculated X, Y from the HTML
  2. Send the (X, Y) to Wix via message
  3. Calculate the new (X, Y) relative to Wix based on the position of the frame
  4. Use wixWindow.scrollTo() to perform scrolling on Wix to the new (X, Y) above