views:

531

answers:

2

With Safari you can disable most iframe scrolling by setting style="overflow: hidden;" on the iframe. However, if you click in the iframe and move the mouse the content scrolls anyhow.

Example:

<html>
  <body>
    <iframe style="width: 100%; height:100px; overflow: hidden;" scrolling="no" src="scrollcontent.html">
    </iframe>
  </body>
</html>

scrollcontent.html:

<html scroll="no" style="overflow:hidden;">
  <body scroll="no" style="overflow:hidden;">
    <div style="background-color: green; height:100px;">A</div>
    <div style="background-color: red; height:100px;">B</div>
  </body>
</html>

In this example, the iframe should only show a green area and it should be impossible to reveal the red area. This is mostly true: there is no scrollbar, the mouse wheel doesn't do anything and neither do the arrow keys.

However click and drag still scrolls the view. This is particularly noticeable when selecting text.

Does anyone know any trick to stop Safari from doing this?

A: 

You could add an window.onscroll method that does a window.scrollTo(0, 0);. It's not pretty but it should work.

WoLpH
It does make the view jump like crazy but it seems to work, mostly. With a little persistence I could make the frame stop in the red - perhaps some race condition between the action of scrolling and the event handler.
Alexander Ljungberg
+2  A: 

In worst case I would try loading the content with jquery load() and then you wrap everything with a <div style"overflow:hidden">your content...</div>

camelCase
That's actually what I ended up doing. I put all the content in a div and prevented it from scrolling.
Alexander Ljungberg