论坛 › 知识问答 › javascript - Mobile Safari - iframe 固定内容

菜鸟教程小白 发表于 2022-12-11 22:17:32

javascript - Mobile Safari - iframe 固定内容

                                            <p><p>Mobile Safari 将 iframe 强制为其内容大小。</p>

<p>所以当 iframe 中有一个固定的 div 时，它不会修复。
是否有一个 CSS 属性可以强制 iframe 在移动设备中滚动并尊重固定内容？</p>

<p><strong>注意</strong>:固定内容在 iframe 内，而不是在容器内，因此 div 滚动无法解决此问题。</p>

<pre><code>&lt;iframe src=&#34;page-with-fixed-content&#34; style=&#34;width: 100%; height: 100%;&#34;&gt;
    &lt;!-- Fixed layer on the page loaded to iframe --&gt;
    &lt;div style=&#34;position: fixed; top:0;&#34;&gt;
      Not Fixed on iPhone (Fixed on desktop)
    &lt;/div&gt;
&lt;/iframe&gt;
</code></pre>

<p> <a href="https://codepen.io/avishic/pen/JzYyeo" rel="noreferrer noopener nofollow">CodePan Example</a> </p>

<p> <a href="/image/igoEz.png" rel="noreferrer noopener nofollow"><img src="/image/igoEz.png" alt="Wanted vs actual behavior"/></a> </p></p>
                                    <br><hr><h1><strong>Best Answer-推荐答案</ strong></h1><br>
                                            <p><p>几个月前，我在开发 web 应用程序时遇到了这个挑战，在安静地研究了一下之后，以下文章中建议的“Shadow DOM”方法有所帮助。</p>

<p> <a href="https://medium.com/@dvoytenko/amp-ios-scrolling-redo-2-the-shadow-wrapper-approach-experimental-3362ed3c2fa2" rel="noreferrer noopener nofollow">https://medium.com/@dvoytenko/amp-ios-scrolling-redo-2-the-shadow-wrapper-approach-experimental-3362ed3c2fa2</a> .</p>

<pre><code> var sd = document.body.attachShadow({mode: &#39;open&#39;});

// Main slot will absorb all undistributed children.
var mainSlot = document.createElement(&#39;slot&#39;);
var scroller = document.createElement(&#39;div&#39;);
scroller.style = &#39;background: lightblue; position: absolute; top:
0; left: 0; right: 0; bottom: 0; overflow-x: hidden; overflow-y: auto; -webkit-overflow-scrolling: touch;&#39;;
scroller.appendChild(mainSlot);
sd.appendChild(scroller);

// Selectively, it&#39;s also possible to distribute fixed elements separately,
// emulating fixed layer transfer.
var fixedLayer = document.createElement(&#39;div&#39;);
fixedLayer.style = &#39;height: 0; width: 0; position: fixed;
overflow:visible;&#39;;
sd.appendChild(fixedLayer);

var mainFixedSlot = document.createElement(&#39;slot&#39;);
mainFixedSlot.setAttribute(&#39;name&#39;, &#39;fixed&#39;);
fixedLayer.appendChild(mainFixedSlot);

function addToFixedLayer(element) {
//var slotId = String(Math.random());
//var fixedSlot = document.createElement(&#39;slot&#39;);
//fixedSlot.setAttribute(&#39;name&#39;, slotId);
//fixedLayer.appendChild(fixedSlot);
//element.setAttribute(&#39;slot&#39;, slotId);
element.setAttribute(&#39;slot&#39;, &#39;fixed&#39;);
}

/*Call and pass fixed elemetns to addToFixedLayer method so that they stay
fixed while scrolling */

addToFixedLayer(fixedDivId)
</code></pre>

<p>查看此演示 <a href="https://jsfiddle.net/rsva63ep/" rel="noreferrer noopener nofollow">https://jsfiddle.net/rsva63ep/</a> </p></p>
                                   
                                                <p style="font-size: 20px;">关于javascript - Mobile Safari - iframe 固定内容，我们在Stack Overflow上找到一个类似的问题：
                                                        <a href="https://stackoverflow.com/questions/54924879/" rel="noreferrer noopener nofollow" style="color: red;">
                                                                https://stackoverflow.com/questions/54924879/
                                                        </a>
                                                </p>
                                       

查看完整版本: javascript - Mobile Safari - iframe 固定内容