嵌入式的iframe无法滚动

Question

我有一个由另一家公司提供的嵌入式iframe用于活动注册。

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

无论我尝试什么方法，都无法使用鼠标滚轮滚动iframe。如果光标在表单上，则无法滚动。如果光标在iframe外，靠近滚动条，则可以滚动。

最初提供的代码没有设置overflow样式。我添加了它并尝试了overflow:scroll和overflow:auto，但都没有成功。

这是给我的完整代码：

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>

我感激任何帮助。

- Verm

---

处理 iframe 中的滚动问题有什么进展吗？ - Aravind Reddy

Answer 1

您需要在HTML中的<iframe>标签上添加scrolling="yes"属性。就像这样：

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

- billy.farroll

---

抱歉，我忘了提到我也尝试过那个方法，但它仍然无法滚动。我刚刚将其添加到代码中进行了双重检查，但仍然无法滚动。 - Verm

嗨@Mike，我现在离开了我的桌面电脑，回来时会给你发消息。 - billy.farroll

Answer 2

您的 iframe 元素需要添加 scrolling="yes" 属性... https://www.w3schools.com/tags/att_iframe_scrolling.asp

- Hudson

---

抱歉，我忘了提到我也尝试过那个方法，但它仍然无法滚动。我刚刚将其添加到代码中进行了双重检查，但仍然无法滚动。 - Verm

可能是硬件问题，或者子文档中的iframe有一个overflow:hidden的CSS规则。 - Hudson

这在HTML 5中不起作用。 - Ruby Racer

Answer 3

如果您在子窗口/嵌入式iFrame中的样式表中使用了overflow-x和overflow-y，最好将它们移除，并通过媒体查询为iOS Safari添加替代方案。iOS Safari不支持同时具有两个值。请参考MDN。

- ThilankaD