I want to display an <iframe> in my site, but I want the site that I am displaying to only be scrollable. All other events should be disabled.

So that the container of the <iframe>, the <iframe> has a width and height of 100%, behaves as if it has nothing inside it.

Almost like it is a scrollable screenshot of the site. So on hover and on click inside the <iframe> don't work.

The reason I am doing this is that the container of the <iframe> needs to be draggable, but can't be dragged as all events on the <iframe> are being registered within the <iframe>.

How can I do this in javascript and / or jQuery?

Can I apply a .preventDefault() to everything except scrolling?

I want to display an <iframe> in my site, but I want the site that I am displaying to only be scrollable. All other events should be disabled.

So that the container of the <iframe>, the <iframe> has a width and height of 100%, behaves as if it has nothing inside it.

Almost like it is a scrollable screenshot of the site. So on hover and on click inside the <iframe> don't work.

The reason I am doing this is that the container of the <iframe> needs to be draggable, but can't be dragged as all events on the <iframe> are being registered within the <iframe>.

How can I do this in javascript and / or jQuery?

Can I apply a .preventDefault() to everything except scrolling?

• javascript
• jquery

Share Follow edited Jun 11, 2013 at 19:04 Ian 51k1313 gold badges104104 silver badges111111 bronze badges asked Jun 11, 2013 at 18:51 Django JohnsonDjango Johnson 1,44944 gold badges2323 silver badges4141 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

You could overlay a div with opacity: 0 (meaning it's fully transparent). That div will intercept most events, such as onclick.

You can then add a mousedown listener to that div which will initiate the 'drag'. The iframe then moves with the transparent div.

This will also disable scrolling though, but maybe you can mirror a scroll event from the div to the iframe .. will be tricky.

Set up a clear div on top of it, if you can use CSS, set the opacity to zero, and set the z-index to 1 on the div, and to -1 on the iframe. Doing that should make the div receive the mousedown events. You could also do document.getElementById("id").onclick=function(){} and make nothing happen on them