Я работаю над веб-страницей, которая вставляет другую страницу из другого домена внутри 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>