停止在可缩放的iframe上滚动

时间:2016-09-08 19:28:56

标签: html iframe

我正在使用嵌入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>
&#13;
&#13;
&#13;

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

当我转动iframe时,3D立方体会缩放并且页面会滚动。

编辑: 我在谷歌地图嵌入页面后看到的效果就是我所看到的效果。或Sketchfab。当我将这些内容嵌入到iframe中时,我不必在页面中做任何特殊的事情来进行嵌入,以便在不滚动的情况下进行缩放。嵌入式内容本身似乎有一些禁用滚动的东西,但我不知道是什么。

4 个答案:

答案 0 :(得分:3)

您可以在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';
});

答案 1 :(得分:2)

在鼠标:hover

上使用此代码
    $("#myframe").hover(
  function() {
   function disableScroll() {
  if (window.addEventListener) // older FF
      window.addEventListener('DOMMouseScroll', preventDefault, false);
  window.onwheel = preventDefault; // modern standard
  window.onmousewheel = document.onmousewheel = preventDefault; // older browsers, IE
  window.ontouchmove  = preventDefault; // mobile
  document.onkeydown  = preventDefaultForScrollKeys;
  }, function() {
     if (window.removeEventListener)
        window.removeEventListener('DOMMouseScroll', preventDefault, false);
    window.onmousewheel = document.onmousewheel = null; 
    window.onwheel = null; 
    window.ontouchmove = null;  
    document.onkeydown = null;  
  }
);

$( "#myframe.fade" ).hover(function() {
  $( this ).fadeOut( 100 );
  $( this ).fadeIn( 500 );

答案 2 :(得分:2)

正如其他人所说,preventDefault()适用于你的第一个例子,它是一个div。

但是,对于外部网站的iframe,这似乎不可能,因为在iframe上只捕获了某些事件。 在此codepen上,您可以看到在iframe上捕获了mouseenter事件,但是没有点击和方向盘。 密切关注console.log(目标)语句,哪些不起作用,哪些不起作用。

Codepen

<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内容,因此可以将wheel事件处理程序添加到框架内容中。试试这个......

框架内容上的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();
});

答案 3 :(得分:1)

为窗口添加一个监听器(iframe的父级)并尝试:

window.addEventListener("wheel", function () {

    if ($("#myframe").is(":hover")) {

        // call iframe zoom function here

        return false;

    }

});

当鼠标悬停在iframe上时,在窗口滚动上返回false但执行缩放。