CODEWITHSUNDEEP
javascripthtmlcssiframe
Verm
Verm

Reputation: 65

Embedded iframe not scrolling

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.

Upvotes: 6

Views: 12769

Answers (3)

ThilankaD
ThilankaD

Reputation: 1099

If you have used either overflow-x and overflow-y in somewhere in your style sheet inside child window/embedded iFrame better to remove them and add alternatives through a media query for iOS Safari. having values for both of them are not supported by iOS Safari. Refer MDN

Upvotes: 0

billy.farroll
billy.farroll

Reputation: 1921

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>

Upvotes: 4

Hudson
Hudson

Reputation: 407

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

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

Upvotes: 3

Related Questions