html - 停止在可缩放的 iframe 上滚动

Question

我正在处理一个网页，该网页将来自不同域的另一个页面嵌入到 iframe 中。此页面的内容完全适合 iframe，因此没有内容溢出和滚动条。但是，可以使用鼠标滚轮缩放内容。

但在 Safari 和 Chrome 中，使用鼠标滚轮缩放也会滚动整个页面。我不希望发生这种滚动——只有 iframe 的缩放。当鼠标悬停在 iframe 上时如何停止滚动？

我试图在 JSFiddle 上的一个最小示例中重现该问题:https://jsfiddle.net/twodee/57a68k3h .当我放大绿色 iframe 时，文本会缩放，但页面也会滚动。

frame = document.getElementById('myframe');
frame_child = document.createElement('div');

var font_size = 12;
frame_child.addEventListener('wheel', function(e) {
  font_size += e.wheelDelta;
  frame_child.style.fontSize = font_size + 'px';
});

frame_child.style.width = '190px';
frame_child.style.height = '190px';
frame_child.innerHTML = 'this text should zoom';
frame.contentWindow.document.body.appendChild(frame_child);

#myframe {
  background-color: #00FF00;
}

<ul>
  <li>a</li>
  <li>a</li>
  <li>a</li>
  <li>a</li>
  <li>a</li>
  <li>a</li>
  <li>a</li>
  <li>a</li>
  <li>a</li>
  <li>a</li>
  <li>a</li>
  <li>a</li>
  <li>a</li>
  <li>a</li>
  <li>a</li>
  <li>a</li>
  <li>a</li>
  <li>a</li>
  <li>a</li>
  <li>a</li>
  <li>a</li>
  <li>a</li>
  <li>a</li>
  <li>a</li>
  <li>a</li>
  <li>a</li>
  <li>a</li>
</ul>
<div>
  <iframe id="myframe" height="200px" width="800px" src="about:blank"></iframe>
</div>
<ul>
  <li>b</li>
  <li>b</li>
  <li>b</li>
  <li>b</li>
  <li>b</li>
  <li>b</li>
  <li>b</li>
  <li>b</li>
  <li>b</li>
  <li>b</li>
  <li>b</li>
  <li>b</li>
  <li>b</li>
</ul>

编辑:上面的例子有点误导，因为 iframe 源并不是真正由我自己的脚本动态生成的。相反，源是由一个单独的网站生成的，该网站需要请求者的表单输入。这是一个更好地展示我的问题的 CodePen:http://codepen.io/twodee/pen/PGqgyw . (JSFiddle 只允许 https://来源。)

当我在 iframe 上滚动时，3D 立方体会缩放并且页面会滚动。

编辑:当 Google map 嵌入页面时，我所追求的效果就是我所看到的效果。或者 Sketchfab。当我将它们嵌入到 iframe 中时，我无需在进行嵌入的页面中执行任何特殊操作即可在不滚动的情况下进行缩放。嵌入内容本身似乎有些东西会禁用滚动，但我不知道是什么。

Answer 1

您可以在您的 Iframe 上添加鼠标事件监听器，以检查您的鼠标是否在其中，如果在，则停止在窗口上发生滚动:

frame = document.getElementById('myframe');
frame_child = document.createElement('div');
var font_size = 12;
var inFrame=false;
frame_child.addEventListener('wheel', function(e) {
  font_size += e.wheelDelta;
  frame_child.style.fontSize = font_size + 'px';
});
frame.addEventListener("mouseover",function(e){
inFrame=true;
});
frame.addEventListener("mouseout",function(e){
inFrame=false;
});
window.addEventListener('wheel',function(e){
if(inFrame)
    e.preventDefault();
})
frame_child.style.width = '190px';
frame_child.style.height = '190px';
frame_child.innerHTML = 'this text should zoom';
frame.contentWindow.document.body.appendChild(frame_child);

<罢工>

只需在您的 div 轮监听器上添加防止默认:

frame_child.addEventListener('wheel', function(e) {
e.preventDefault();
  font_size += e.wheelDelta;
  frame_child.style.fontSize = font_size + 'px';
});