0

我已附加该网站，因为我无法在 jsfiddle 中重新创建它。将鼠标悬停在 iframe 中的 openzoom 组件上并使用鼠标向内或向外滚动时，页面也会移动。“在” iframe 中时如何防止页面滚动？

这是一个示例网站

打开 main.html

4

1 回答 1

0

使用 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

于 2012-08-12T17:20:23.560 回答