Home/ Questions/Q 8374825
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-09T15:00:51+00:00

I’ve attached the website as I can’t recreate it in jsfiddle. When mousing over

  • 0

I’ve attached the website as I can’t recreate it in jsfiddle. When mousing over the openzoom component in the iframe and scrolling in or out with the mouse, the page also moves. How would I prevent the page scrolling when “in” the iframe?

Here is an example website

Open main.html

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    It’s possible with the use of Brandon Aaron’s Mousewheel plugin.

    Here is the code..

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

    EDIT:

    Link to my copy: http://testing.dpwebdev.co.uk/stackoverflow/main.html

    • 0