iframe 内捕捉点击，无视父页面滚动：全面指南

在 iframe 中捕捉点击，无视父页面滚动

问题概述

在将 iframe 嵌入网页时，当父页面滚动时，鼠标光标悬停在 iframe 上方时，滚动会停止并转发到 iframe。这可能会带来干扰，特别是当你想在 iframe 中允许点击时。

解决方法

解决这个问题有几种方法，每种方法都适用于不同的浏览器和情况。

方法 1：CSS

在父页面的样式表中，添加以下 CSS 规则：

iframe {
  -ms-touch-action: none;
  touch-action: none;
  -webkit-overflow-scrolling: touch;
}

这将禁用 iframe 上的指针事件，允许点击但不影响滚动。

方法 2：JavaScript

在 iframe 中，添加以下 JavaScript 代码：

document.addEventListener('touchmove', function(e) {
  e.preventDefault();
});

这将阻止 iframe 内的触控移动事件，从而忽略父页面的滚动。

方法 3：HTML 属性

在 iframe 中，添加 scrolling="no" 属性。这将禁用 iframe 的滚动，但仍然允许点击。

注意事项

• 方法 1 不适用于 Microsoft Edge。
• 方法 2 不适用于某些旧版浏览器，如 IE11。
• 方法 3 只适用于 iframe 的垂直滚动。

示例代码

在父页面 HTML 中：

<iframe src="iframe-content.html" scrolling="no"></iframe>

在 iframe CSS 中：

iframe {
  -ms-touch-action: none;
  touch-action: none;
  -webkit-overflow-scrolling: touch;
}

在 iframe JavaScript 中：

document.addEventListener('touchmove', function(e) {
  e.preventDefault();
});

结论

通过实施这些解决方案之一，你可以允许 iframe 内的点击，同时忽略父页面的滚动。根据你的浏览器和特定情况选择最适合的方法。

常见问题解答

1. 为什么我需要在 iframe 上禁用指针事件？
   为了允许点击而忽略滚动。
2. 这些方法适用于所有浏览器吗？
   否，有些方法适用于特定浏览器。请参阅注意事项部分以了解详细信息。
3. iframe 内的滚动如何？
   方法 3 会禁用 iframe 的垂直滚动，而其他方法允许 iframe 内的滚动。
4. 是否有其他解决方法？
   可以尝试使用 JavaScript 事件监听器或 CSS 技巧来控制滚动行为，但这些方法可能不适用于所有情况。
5. 这些方法会影响 iframe 内的性能吗？
   不，这些方法不会显着影响 iframe 内的性能。