I'm working on a webpage that embeds another page from a different domain inside an iframe. The content of this page fits the iframe exactly, so there's no overflowing content and no scrollbars. However, the content can be zoomed with the mousewheel.

But in Safari and Chrome, zooming with the mousewheel also scrolls the entire page. I don't want this scrolling to happen---only the zooming of the iframe. How can I stop this scrolling when the mouse is over the iframe?

I've attempted to recreate the problem in a minimal example on JSFiddle: <https://jsfiddle.net/twodee/57a68k3h>. When I zoom over the green iframe, the text zooms but the page also scrolls.

```js
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);
```

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

```html
<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>
```

EDIT:
The example above is a little misleading in that the iframe source is not really generated dynamically by my own script. Instead, the source is generated by a separate website, which expects form input from the requester. Here's a CodePen that better demonstrates my issue: <http://codepen.io/twodee/pen/PGqgyw>. (JSFiddle only allows https:// sources.)

When I wheel over the iframe, the 3D cube zooms and the page scrolls.

EDIT:
The effect I'm after is what I see when Google Maps is embedded in a page. Or Sketchfab. When I embed these in an iframe, I don't have to do anything special in the page that's doing the embedding to make zooming happen without scrolling. There seems to be something about the embedded content itself that disables the scrolling, but I don't know what.