Question

我在使用

设置的ios上有一个可滚动的iframe

<div style="position: fixed; top: 0; left: 0; width: 100%; height: 100%; overflow: scroll; -webkit-overflow-scroll: touch; ...">
  <iframe style="height: 600px, ...">
  </iframe>
</div>

iframe的高度实际设置为screen.availHeight，并且在方向发生变化时不会发生变化。

现在，如果在手机处于纵向模式时打开模态，它可以正常工作。如果在手机处于横向模式时打开模态，它可以正常工作。如果它以横向模式打开并旋转成肖像，那也可以正常工作。

但是，如果它以纵向模式打开并旋转到横向模式，则滚动不工作;你最终会滚动底层页面，而不是模态本身。

尽管无论方向如何，造型都完全相同。

之前有人发生过这种情况吗？解决方法？发生了什么事？我在这里是一个n00b，任何建议都赞赏。

Answer 1

<script>
        (function(d) {
            loadFonts = 1;
            if(window.sessionStorage){
                if(sessionStorage.getItem('useTypekit')==='false'){
                    loadFonts = 0;
                }
            }

            if (loadFonts == 1) {
                    var config = {
                        kitId: 'XXXXXXXX',
                        scriptTimeout: 3000,
                        async: true
                    },
                    h=d.documentElement,t=setTimeout(function(){h.className=h.className.replace(/\bwf-loading\b/g,"")+" wf-inactive";if(window.sessionStorage){sessionStorage.setItem("useTypekit","false")}},config.scriptTimeout),tk=d.createElement("script"),f=false,s=d.getElementsByTagName("script")[0],a;h.className+="wf-loading";tk.src='https://use.typekit.net/'+config.kitId+'.js';tk.async=true;tk.onload=tk.onreadystatechange=function(){a=this.readyState;if(f||a&&a!="complete"&&a!="loaded")return;f=true;clearTimeout(t);try{Typekit.load(config)}catch(e){}};s.parentNode.insertBefore(tk,s);
                }
            }

        )(document);
        </script>
<style>
        .wf-loading p, .wf-loading h1, .wf-loading h2, .wf-loading h3, .wf-loading h4 {
            visibility: hidden;
        }
        .wf-active  p, .wf-active h1, .wf-active h2, .wf-active h3, .wf-active h4 {
            visibility: visible;
        }
        .wf-inactive    p, .wf-inactive h1, .wf-inactive h2, .wf-inactive h3, .wf-inactive h4 {
            visibility: visible;
        }
</style>

我以这种方式解决了这个问题

ios iframe仅在从纵向更改方向后不可滚动 - ＆gt;景观

1 个答案: