我在一个网页上嵌入另一个不同域名的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：// sources.)
当我滚动iframe时,3D立方体缩放,页面滚动.
编辑：
我之后的效果是Google地图嵌入页面时所看到的.或Sketchfab.当我将这些嵌入到iframe中时,我不必在页面中做任何特殊的处理,即使没有滚动也可以进行缩放.似乎有一些嵌入式内容本身禁用滚动,但我不知道什么.
解决方法
正如其他人所说,preventDefault()适用于您的第一个例子,它是一个div.
但是,iframe到外部站点似乎不可能,因为只有某些事件被捕获在iframe上.
在这个codepen上,您可以看到鼠标指针事件被捕获在iframe上,但是点击和轮子并不是这样.
请注意console.log(target)语句和哪些工作,哪些不工作.
<iframe id="myframe" src="http://www.w3schools.com"> </iframe> <br> <div id="div1"> test </div> <div id="div2"> </div>
CSS
iframe {
width:600px;
height:200px;
border: 10px solid red;
}
div {
width:600px;
height:40px;
border: 10px solid blue;
}
#div2 {
width:600px;
height:800px;
border: 10px solid green;
}
JS
frame = document.getElementById('myframe');
div = document.getElementById('div1');
frame.addEventListener('mouseenter',function(e) {
console.log('entered');
var target = e.target;
console.log(target);
});
frame.addEventListener('click',function(e) {
console.log('clicked');
var target = e.target;
console.log(target);
});
frame.addEventListener('wheel',function(e) {
console.log('wheel');
var target = e.target;
console.log(target);
});
font_size = 12;
div1.addEventListener('wheel',function(e) {
var target = e.target;
console.log(target);
font_size += -e.wheelDelta/100;
this.style.fontSize = font_size + 'px';
if(target.id === 'div1')
e.preventDefault();
});
更新：
由于您认为可以控制iframe内容,因此可以将轮事件处理程序添加到框架内容中.尝试这个…
框架内容上的HTML
<div id="framedDiv"> abc<br> def<br> ghi<br> jkl<br> mno<br> pqr<br> stu<br> vwx<br> abc<br> def<br> ghi<br> jkl<br> mno<br> pqr<br> stu<br> vwx<br> abc<br> def<br> ghi<br> jkl<br> mno<br> pqr<br> stu<br> vwx<br> </div>
JS上的框架内容
framed = document.getElementById('framedDiv');
font_size = 12;
framed.addEventListener('wheel',function(e) {
var target = e.target.id;
console.log(target);
font_size += -e.wheelDelta/100;
this.style.fontSize = font_size + 'px';
e.preventDefault();
});
