CODEWITHSUNDEEP
javascriptjqueryiframescroll
Gacek
Gacek

Reputation: 10322

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

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

Upvotes: 4

Views: 3582

Answers (4)

Alex
Alex

Reputation: 102

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

Upvotes: 0

Julien Alary
Julien Alary

Reputation: 780

You can catch mousewheel event

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

Upvotes: 1

thiagoh
thiagoh

Reputation: 7388

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

Upvotes: 1

Alex
Alex

Reputation: 102

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

Upvotes: 4

Related Questions