Question

我已经附加了网站，因为我无法在jsfiddle中重新创建它。当鼠标悬停在iframe中的openzoom组件上并使用鼠标滚动或滚出时，页面也会移动。当我在iframe中时，如何阻止页面滚动？

打开main.html

Answer 1

可以使用Brandon Aaron的Mousewheel插件。

这是代码..

<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
</head>
<body>
<p>...</p>
<iframe src="viewer.htm" id="viewer" width="565px" height="200px" marginwidth="0px" marginheight="0" frameborder="0"></iframe>
<p>...</p>
<script src="https://github.com/brandonaaron/jquery-mousewheel/raw/master/jquery.mousewheel.js"></script>
<script>
$(function() {

  var viewer = $('#viewer'),
      height = viewer.height(),
      scrollHeight = viewer.get(0).scrollHeight;

  viewer.bind('mousewheel', function(e, d) {
    if((this.scrollTop === (scrollHeight - height) && d < 0) || (this.scrollTop === 0 && d > 0)) {
      e.preventDefault();
    }
  });

});
</script>
</body>
</html>

修改

链接到我的副本：http://testing.dpwebdev.co.uk/stackoverflow/main.html

当与openzoom一起使用时，iframe允许在包含页面中滚动

1 个答案: