我在网页中嵌入了多个 iframe。在父页面上滚动时，一旦鼠标光标位于其上，滚动就会停止并开始转发到 iframe。我知道我可以使用 禁用 iframe 上的指针事件pointer-events: none，但我需要 iframe 允许单击，同时忽略滚动。

我可以控制父页面和 iframe 内容。有没有办法解决这个问题，如何使用 iframe、CSS 或 JavaScript 上的 HTML 属性来解决这个问题？

1

  • 如果您只关心鼠标滚轮滚动，可以通过捕获 iframe 上的“wheel”事件、阻止它并将该事件的 event.deltaY（滚动量）传递给父窗口来解决此问题。然后父窗口可以滚动该量。然而，虽然滚轮滚动可以很平滑，但默认情况下，经过窗口时的滚动可能只是以小步“跳跃”（这可以单独解决），尽管它仍然会以与滚动相同的速度发生。如果您同意这些注意事项，我可以用代码写出完整的答案。


    – 


6 个回答
6

iframe 元素有一个scrolling可以设置为 的属性no。这是一个例子：

<iframe src="https://www.bing.com/search?q=how+to+hide+scroll+bar+of+iframe&cvid=fdd706f4c38342ba9e208ec7334402db&gs_lcrp=EgZjaHJvbWUqBggAEEUYOzIGCAAQRRg7MgYIARBFGDsyBggCEEUYOTIGCAMQRRg7MgYIBBAAGEAyBggFEAAYQDIGCAYQRRg8MgYIBxBFGDwyBggIEEUYPNIBCDE4NzNqMGo0qAIAsAIA&FORM=ANAB01&PC=NMTS" scrolling="no" height="500px" width="500px"></iframe>

只需确保使用 iframe 属性指定高度和宽度，以防止任何 CSS 混乱。

PS这个问题已经得到了回答。

2

  • 多谢！它看起来非常有前途，不幸的是它已被弃用，因此我无法使用它


    – 

  • 没问题！此外，尽管 W3C 验证器将scrolling=”no” 属性报告为已过时，并建议改用 CSS，但这仍然是仅有的两种可以帮助您在大多数浏览器上禁用滚动的方法之一。另一个解决方案是放置 style=”overflow: hide;”作为 iframe 元素属性。


    – 

你可以这样做：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Parent Page</title>
<style>

  .iframe-container {
    position: relative;
    width: 100%;
    height: 300px; 
    overflow: hidden;
  }
  .iframe-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
  }
</style>
</head>
<body>

<!-- Parent Page Content -->
<div class="iframe-container">
  <iframe src="iframe.html" id="iframe"></iframe>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
  var iframe = document.getElementById('iframe');

  // Event listener for scrolling on the parent page
  window.addEventListener('scroll', function(event) {
    // Check if the mouse is over the iframe
    if (!isMouseOverIframe(event.clientX, event.clientY)) {
      // Allow scrolling on the parent page
      event.stopPropagation();
    }
  });

  // Function to check if the mouse is over the iframe
  function isMouseOverIframe(x, y) {
    var rect = iframe.getBoundingClientRect();
    return (
      x >= rect.left &&
      x <= rect.right &&
      y >= rect.top &&
      y <= rect.bottom
    );
  }
});
</script>

</body>
</html>

1

  • 谢谢你！这与我之前尝试过的类似。我目前在触控板上，但没有成功。我还使事件侦听器处于被动状态，但我仍然可以滚动。目前正在调试，否则知道什么可能导致滚动仍然进行吗？


    – 

iframe实际上，如果您的内容不够大，无法显示完整内容，则不可能发生这种情况。

的内置功能，但自 2018 年以来仍然开放，所以我认为它不会这么快应用。

但对于某些人来说，有一些解决方法，但我不推荐它，因为它只能在某些浏览器或特定人群中工作，但它们是：

overflow-x: hidden1 -检查iframe或其父母是否有

overflow-x: hidden对于某些人来说，更改为后问题就解决了-webkit-overflow-scrolling: touch

2 – 添加到pointer-events: none您的iframe

我知道这是您已经尝试过的问题，但对于不需要互动的人来说iframe，这就是解决方案

3 –overflow: hidden添加iframe

对于 Linux 和 Windows 中的 Chrome，这在大多数情况下都有效。

iframe {
    overflow: hidden;
}

但这仅在您设置高度和宽度时才有效iframe

4 – 嵌套iframe在另一个中iframe

您可以将iframe感兴趣的内容嵌套在另一个感兴趣的内容中iframe。可以给这个嵌套的 iframe 一个fixed位置，使其完全覆盖其包装iframe。通过这样做，您可以阻止 Chrome 等浏览器允许该特定元素的父元素iframe滚动：

iframe { position: fixed; top: 0; width: 100vw; height: 100vh; border: none; padding: 0; margin: 0; }
<iframe srcdoc="
<script>
  onclick = e => setTimeout(() => {
    document.querySelector('h1').scrollIntoView();
  }, 1500);
  onclick();
</script>
<h1 style='margin-top: 100vh' >I still scroll into view, but not the top page.</h1>
"></iframe>

3

  • 非常感谢您的详细回复！你写了By doing this, you can prevent browsers like Chrome from allowing the parent elements of this particular iframe to scroll:。澄清一下，只允许父页面滚动，不允许 iframe 滚动，并且 iframe 必须只接收点击事件。这就是您声明中的意思吗？


    – 


  • 是的，朋友，我写这篇文章是为了遇到这个特定问题的人。但您的情况对于使用的人来说非常常见iframe，并且实际上没有解决方案或全局解决方法：/。只需更改您的iframe内容即可显示完整内容，无需在其中使用滚动。


    – 


  • 1
    谢谢。如果没有其他人提出解决方案，我会接受这个答案。


    – 

如果用户必须在 iframe 内部单击才能滚动它是可以接受的，那么以下代码片段可能会帮助您：

每个都iframe覆盖有div相同高度和宽度的保护层，这可以保护它们iframe免受mousewheel事件的影响。事件click处理程序将各个iframe–div对设置为scrollable：通过将覆盖高度设置为div0，这允许mousewheel事件到达iframe。

scrollable当在其外部发生咔哒声时，一对就会失去其状态。

该background-color规则给出了一个视觉指示，即 iframe 当前是否被覆盖，因此不可滚动。

document.querySelectorAll("div.iframe").forEach(function(div) {
  div.addEventListener("click", function(event) {
    div.classList.add("scrollable");
  }, true);
});
document.addEventListener("click", function(event) {
  document.querySelectorAll("div.iframe").forEach(function(div) {
    div.classList.remove("scrollable");
  });
}, true);
div.iframe {
  position: relative;
  height: 100px;
}

div.iframe * {
  position: absolute;
  top: 0;
  height: 100px;
  width: 100%;
}

div.iframe div {
  background-color: rgba(250, 250, 250, 0.5);
}

div.iframe.scrollable div {
  height: 0;
}
Page content
<div class="iframe">
  <iframe src="first frame"></iframe>
  <div></div>
</div>
More page content
<div class="iframe">
  <iframe src="second frame"></iframe>
  <div></div>
</div>

我建议您采取一些不同的方法：

1. 覆盖透明 div：
将透明 div 放置在 iframe 上。该 div 将捕获鼠标事件，允许在父页面上滚动，同时仍允许在 iframe 内单击。以下是如何使用 CSS 执行此操作的示例：

<style>
  .iframe-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none; 
    background-color: rgba(0, 0, 0, 0); 
  }
</style>
<div class="iframe-overlay"></div>
<iframe src="your-iframe-source"></iframe>

根据需要调整 .iframe-overlay 类以适合您的特定布局。

在 Iframe 中为 Body 设置溢出：隐藏（没有在我的列表中列出，因为有人已经建议了这一点。）

2. JavaScript 事件处理：
使用JavaScript 处理鼠标事件并控制滚动行为。当鼠标进入 iframe 时，禁用父页面上的滚动。当鼠标离开 iframe 时，重新启用滚动。

$(document).ready(function () {
  const iframe = document.getElementById('your-iframe-id');
  const parentBody = document.body;

  iframe.addEventListener('mouseenter', () => {
    parentBody.style.overflow = 'hidden';
  });

  iframe.addEventListener('mouseleave', () => {
    parentBody.style.overflow = 'auto';
  });
});

1

  • 这看起来很有希望，今晚我会尝试一下


    –      


// Example code within the iframe content
document.addEventListener('click', function(event) {
  // Send a message to the parent window
  window.parent.postMessage('clickDetected', 'https://your-parent-origin.com');
});
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Clicks in iframe</title>
<style>
  /* Style iframe to fill parent */
  iframe {
    width: 100%;
    height: 100%;
    border: none;
  }
</style>
</head>
<body>

<iframe id="myIframe" src="https://example.com"></iframe>

<script>
  // Get the iframe element
  var iframe = document.getElementById('myIframe');

  // Add event listener for clicks inside the iframe
  window.addEventListener('message', function(event) {
    // Check origin of the message
    if (event.origin === 'https://example.com') {
      // Handle click events here
      console.log('Click detected inside the iframe');
    }
  });

</script>

</body>
</html>

1

  • 抱歉，我无法接受 AI 生成的答案


    –