How can Safari be prevented from scrolling an overflow:hidden iframe?

我怕爱的太早我们不能终老 提交于 2019-12-22 14:01:12

问题


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?


回答1:


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




回答2:


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>



来源:https://stackoverflow.com/questions/2467386/how-can-safari-be-prevented-from-scrolling-an-overflowhidden-iframe

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!