禁用iframe中的滚动

Question

I have my html page with a iframe, and when I put the mouse on the iframe and I use the mouse scroll button it will scroll the iframe page and I don't want that to happen. But I don't want the scroll to be totaly disable in this iframe because I have a fresque and I must be abble to zoom in with the scroll

How could I do ?

I have try to do scrollTo(0, 0); but it does it on the real page and not on the iframe.

Answer 1

尝试使用scrolling =“ no”选项，如下所示

<iframe scrolling="no" src="http://www.google.com" width="400px" height="300"></iframe>

Answer 2

You can try to use the mousewheel event to cancel the scroll.

Example code:

window.onload=function(){
    setTimeout(function(){ //just to be sure that the document exists
        document.onmousewheel=function(event){
            event.preventDefault();

            //add here your code to zoom

        };
    },300);
};

Notice that IE8 will always "internally" use event.preventDefault(); and the scroll won't work if you want to use a flag to enable/disable the scroll.

You can read more information here: http://www.quirksmode.org/dom/events/scroll.html

---

This is my old solution:

The question isn't specific enough, but I think I understood it.

Here is a piece of jQuery to fix what I understood:

(function($){
    $(function(){
        $(window).click(function(event){
            if(event.which==3) //middle button
            {
                event.preventDefault();
                //remaining code for the zoom(?)
            }
        });
    });
})(jQuery);

This should disable using the scroll wheel to scroll the page (doesn't work on touch).

You can include the code for the zooming(?) inside the if block.

Include this code inside the iframe!

Answer 3

Assuming: "I want to disable the scroll of the page without disabeling the scroll (in the iframe ) "

First, this CSS will turn off scrollbars on the page ...

<style type="text/css">
  html, body {
    overflow: hidden;
  }
</style>

... and, this will disable scrolling anytime it is tried ...

$(window).scroll(function() {
    scroll(0,0);
});

... although, this might be a better option ...

document.body.scroll = "no";
document.body.style.overflow = 'hidden';
document.height = window.innerHeight;