Embedded iframe not scrolling

Question

I have an embedded iframe supplied by another company for an event registration.

https://casaimports.com/food-expo/attendee-registration/

No matter what I try I cannot get the iframe to scroll using the mouse scroll wheel. If you have your cursor on the form it won't scroll. If the cursor is off the iframe, near the scrollbar then it works.

The original code supplied did not have an overflow style set. I added it and have tried overflow:scroll and overflow:auto but to no avail.

Here is the full code that was given to me:

var userOffset = new Date().getTimezoneOffset();
var uagent = navigator.userAgent.toLowerCase();
var safariLink = document.getElementById("safari-link");
var iFrame = document.getElementById("iframeResizer0");
if (/safari/.test(uagent) && !/chrome/.test(uagent)) {
  safariLink.style.display = "inline";
  safariLink.setAttribute('href', safariLink.getAttribute('href') + '&Offset=' + userOffset);
  iFrame.style.display = "none";
  document.getElementById("iframe-loading").style.display = "none";
} else {
  safariLink.style.display = "none";
  iFrame.style.display = "inline";
  iFrame.setAttribute('src', iFrame.getAttribute('src') + '&Offset=' + userOffset);
}
iFrameResize({
  autoResize: false,
  log: true, // Enable console logging
  enablePublicMethods: true, // Enable methods within iframe hosted page
  checkOrigin: false,
  resizedCallback: function(messageData) { // Callback fn when resize is received
    document.getElementById("iframe-loading").style.display = "none";
  }
});

#iframe-loading {
  width: 100%;
  text-align: center;
}

<script src="https://tradeshow.perenso.net/registration/scripts/iframeResizer.min.js"></script>
<div id="iframe-loading"><img src="https://tradeshow.perenso.net/registration/content/images/ajax-loader.gif" /></div>

<iframe src="https://tradeshow.perenso.net/registration/embedded/index/CASAIMPORTSSEP18?RegType=CUSTOMER" style="border: 0; width: 100%; overflow:auto;" id="iframeResizer0" scrolling="yes"></iframe>

<div style="text-align: center;">

  <a href="https://tradeshow.perenso.net/registration/embedded/index/CASAIMPORTSSEP18?RegType=CUSTOMER" id="safari-link" target="_blank" class="button icon icon-after fa-chevron-right">Open Registration Form</a></li>


</div>

I appreciate any help.

Answer 1

You need to add the scrolling="yes" attribute to your <iframe> tag in the HTML. Like this:

<iframe src="https://tradeshow.perenso.net/registration/embedded/index/CASAIMPORTSSEP18?RegType=CUSTOMER" style="border: 0; width: 100%; overflow:auto;" id="iframeResizer0" scrolling="yes"></iframe>

Answer 2

your iframe element needs the scrolling="yes" attribute...

https://www.w3schools.com/tags/att_iframe_scrolling.asp