CODEWITHSUNDEEP
htmliframescroll
Kenny Johnson
Kenny Johnson

Reputation: 784

How to prevent iframe scrolling in IE (8)

While searching for the answer to this, I kept finding answers on how to remove the scrollbars. That does not fully solve the problem for me. I have an index.php file which I am trying to put in an iframe on my site. The index.php contains one <div> with a <span> in it.

<iframe src="index.php" scrolling="no" style="border:0px; height: 300px; width:158px;"></iframe>

However, when I click and drag that <div>, the page still scrolls (horizontally). I can only see this happen in IE8. I've tested in Firefox but I don't see it. Is there a way to completely prevent the page from scrolling if a customer clicks and drags in the iframe?

I realize this is an edge case and it probably won't happen a lot in production, but my iframe is going on a corporate web page and I would like to eliminate as many undesirable effects as possible.

I can put whatever I want in the <iframe> tag and in index.php but anything else on the page where the iframe is going will be off limits to me.

Index.php has the following code:

<div id="link"><span class="link"></span></div>

I have a stylesheet set up to make the span look like an image by using background-image. The background image is 60px tall but only 30px is displayed at any given time depending on whether or not the span is in focus or hovered.

Upvotes: 2

Views: 863

Answers (1)

Yuriy Galanter
Yuriy Galanter

Reputation: 39777

You need to effectively cancel scroll. And since "onscroll" event is not cancelable the next best thing is to reset scroll position. Add this to your index.php (e.g into <head> section):

<script>
        window.onscroll = function () {
            window.scrollTo(0,0)
        }
</script>

on any scroll attempt (including drag-scroll) it will reset scrolling position. You may notice a slight jump, but the page won't scroll.

Upvotes: 1

Related Questions