javascript - Mobile Safari - iframe 固定内容
问题描述
Mobile Safari 将 iframe 强制为其内容大小。
因此,当 iframe 中有一个固定的 div 时,它不会修复。是否有 CSS 属性强制 iframe 在移动设备中滚动并尊重固定内容?
注意:固定内容在 iframe 内,而不是在容器内,因此 div 滚动无法解决此问题。
<iframe src="page-with-fixed-content" style="width: 100%; height: 100%;">
<!-- Fixed layer on the page loaded to iframe -->
<div style="position: fixed; top:0;">
Not Fixed on iPhone (Fixed on desktop)
</div>
</iframe>
解决方案
几个月前,我在开发 web 应用程序时遇到了这个挑战,经过一番安静的研究后,下一篇文章中建议的“Shadow DOM”方法有所帮助。
var sd = document.body.attachShadow({mode: 'open'});
// Main slot will absorb all undistributed children.
var mainSlot = document.createElement('slot');
var scroller = document.createElement('div');
scroller.style = 'background: lightblue; position: absolute; top:
0; left: 0; right: 0; bottom: 0; overflow-x: hidden; overflow-y: auto; -webkit-overflow-scrolling: touch;';
scroller.appendChild(mainSlot);
sd.appendChild(scroller);
// Selectively, it's also possible to distribute fixed elements separately,
// emulating fixed layer transfer.
var fixedLayer = document.createElement('div');
fixedLayer.style = 'height: 0; width: 0; position: fixed;
overflow:visible;';
sd.appendChild(fixedLayer);
var mainFixedSlot = document.createElement('slot');
mainFixedSlot.setAttribute('name', 'fixed');
fixedLayer.appendChild(mainFixedSlot);
function addToFixedLayer(element) {
//var slotId = String(Math.random());
//var fixedSlot = document.createElement('slot');
//fixedSlot.setAttribute('name', slotId);
//fixedLayer.appendChild(fixedSlot);
//element.setAttribute('slot', slotId);
element.setAttribute('slot', 'fixed');
}
/*Call and pass fixed elemetns to addToFixedLayer method so that they stay
fixed while scrolling */
addToFixedLayer(fixedDivId)
推荐阅读
- python - Having multiple correct answers in a user defined dictionary
- vba - 如何检测单元格是否由“=IF()”公式而不是用户更改
- java - Color Grading using LUT and PShader
- laravel - Laravel 向数据库中的地址发送电子邮件
- javascript - ExtJS - 带有商店的组合框添加自定义选择
- javascript - how to close a particular link on click button using javascript?? window.close is closing my current window only
- css - Excel 导出中的 ClientGroupHeaderTemplate (Kendo ASP.NET MVC)
- java - 运行 Selenium 脚本时 Chrome 无法正确关闭
- javascript - load vrml in an angular project using three-full
- matplotlib - The location of .config for geotiler on Windows