0

jsfiddleで再現できないので、ウェブサイトを添付しました。iframeのopenzoomコンポーネントにマウスを合わせ、マウスでスクロールインまたはスクロールアウトすると、ページも移動します。iframe内でページがスクロールしないようにするにはどうすればよいですか？

これがウェブサイトの例です

main.htmlを開きます

4

1 に答える 1

0

BrandonAaronの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 に答える