Don't propagate mouse wheel scrolling to IFRAME and its content

Question

On my page I have iframe that contains some divs with scrollbars: http://jsfiddle.net/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.net/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 completely. I would like to block only mouse-scrolls, but preserving the ability to click

Possible duplicate of [HTML iframe - disable scroll](http://stackoverflow.com/questions/15494568/html-iframe-disable-scroll) — Alex, Dec 10 '15 at 00:40

score 4 · Answer 1 · answered Dec 09 '15 at 13:50

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

answered Dec 09 '15 at 13:50

Alex

102
1
10

But won't this block also other events like clicks? – Gacek Dec 09 '15 at 14:03
yes it would this option would be most useful if you were simply trying to let them view a portion of another page, sorry. – Alex Dec 09 '15 at 18:20
1

Yeah, but I need to block only scrolls, preserving the ability to click. – Gacek Dec 09 '15 at 20:09

score 1 · Answer 2 · answered Dec 09 '15 at 13:53

1

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

answered Dec 09 '15 at 13:53

thiagoh

7,098
8
51
77

1

will this work if I do not have the access to iframe's content? (another domain) – Gacek Dec 09 '15 at 14:02
hmm, I haven't tested this scenario but I don't think so.. Could you please try and tell us? – thiagoh Dec 09 '15 at 14:07
as I imagined.. Thank you @Gacek – thiagoh Dec 09 '15 at 16:01

score 1 · Answer 3 · answered Dec 09 '15 at 13:54

1

You can catch mousewheel event

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

answered Dec 09 '15 at 13:54

Julien Alary

780
1
5
16

will this work if I do not have the access to iframe's content? (another domain) – Gacek Dec 09 '15 at 14:01
For sure not : if you can't modify iframe content it won't work – Julien Alary Dec 09 '15 at 14:13
We're not here to talk about product behavior, but I don't think avoid a user to scroll a div where he can see a scrollbar is a real-world solution. – Julien Alary Dec 09 '15 at 14:52
Well, he can always click or drag the scrollbars. That's the point. – Gacek Dec 09 '15 at 14:57

score 0 · Answer 4 · edited May 23 '17 at 11:44

0

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

edited May 23 '17 at 11:44

Community

1
1

answered Dec 10 '15 at 00:36

Alex

102
1
10

Don't propagate mouse wheel scrolling to IFRAME and its content

4 Answers4