CODEWITHSUNDEEP
htmlwordpressiframeelementor
Kazeshi
Kazeshi

Reputation: 1

How to disable my wordpress page from scrolling up when clicking inside an iFrame?

Recently I added an iFrame using the following code I found online:

"<iframe id=“personio-iframe” style=“border: none;” src=“my website address is here” width=“100%” onload=“window.top.scrollTo(0,0);“> window.addEventListener(‘message’, function(e) { var iframe = document.querySelector(‘#personio-iframe’); var eventName = e.data[0]; var data = e.data[1]; switch(eventName) { case ‘setHeight’: iframe.style.height = data + ‘px’; window.scrollTo({ top: 0, behavior: ‘smooth’ }); break; } }, false);"

I noticed whenever I click on any part inside an iFrame the page scrolls up.

I can see the two lines in the code that mention scrolling up, but when I tried to delete them the frame doesn't show properly, it's displayed as a narrow bar on the page.

Can you please let me know how can I modify this code to successfully get rid of the scrolling up without damaging the iFrame itself?

Upvotes: 0

Views: 74

Answers (1)

Petros
Petros

Reputation: 76

Please try this line:

<iframe id="personio-iframe" style="border: none;" src="your website address is here" width="100%" height="600px"></iframe>

This is optional for your css, with it the iframe will not go over 90% of screen height

#personio-iframe {max-height:90vh;}

Upvotes: 0

Related Questions