javascript - Don't propagate mouse wheel scrolling to IFRAME and its content - Stack Overflow

On my page I have iframe that contains some divs with scrollbars: /

The iframe's content is from another domain, so I do not have access to its content via DOM.

How can I block mouse-wheel scrolling of the iframe and its content? What I want to achieve is that mouse-wheel scroll will always scroll the parent page, even if the cursor is over the iframe.

EDIT

I made a little bit more real-world example: /

I want to prevent the inner iframe's divs (facebok feed) from scrolling with mouse wheel.

EDIT

To make sure: I do not want to disable scrollbars on IFRAME element nor block all events pletely. I would like to block only mouse-scrolls, but preserving the ability to click

On my page I have iframe that contains some divs with scrollbars: http://jsfiddle/gdx6L940/

The iframe's content is from another domain, so I do not have access to its content via DOM.

How can I block mouse-wheel scrolling of the iframe and its content? What I want to achieve is that mouse-wheel scroll will always scroll the parent page, even if the cursor is over the iframe.

EDIT

I made a little bit more real-world example: http://jsfiddle/gdx6L940/2/

I want to prevent the inner iframe's divs (facebok feed) from scrolling with mouse wheel.

EDIT

To make sure: I do not want to disable scrollbars on IFRAME element nor block all events pletely. I would like to block only mouse-scrolls, but preserving the ability to click

• javascript
• jquery
• iframe
• scroll

Share Improve this question Follow edited Dec 10, 2015 at 0:54 Gacek asked Dec 9, 2015 at 13:44 GacekGacek 10.3k1010 gold badges5858 silver badges8989 bronze badges 2

• Possible duplicate of HTML iframe - disable scroll – Alex Commented Dec 10, 2015 at 0:40
• No, that's not the case. – Gacek Commented Dec 10, 2015 at 0:53

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 4

I believe that you can simply set another div element over the existing one and then put the transparency of that at 100%. that may not be the correct way of achieving your goal but it should work. I'll test it and make edits if necessary

I think I got to do partially what you want

use the code to prevent the browser from scrolling inside the div (that is inside you iframe)

window.addWheelListener(div_el, function(e) {
  console.log(e.deltaY);
  e.preventDefault();
})

the working example and addWheelListener code is in my jsfiddle here

You can catch mousewheel event

iframe.contentWindow.document.onmousewheel=function(event){
    event.preventDefault();
};

Just did some more research and it would appear that what you are trying to do is just not possible to do the way you want to do it.

also possible duplicate of HTML iframe - disable scroll