• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    迪恩网络公众号

javascript - Mobile Safari - iframe 固定内容

[复制链接]
菜鸟教程小白 发表于 2022-12-11 22:17:32 | 显示全部楼层 |阅读模式 打印 上一主题 下一主题

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>

CodePan Example

Wanted vs actual behavior



Best Answer-推荐答案


几个月前,我在开发 web 应用程序时遇到了这个挑战,在安静地研究了一下之后,以下文章中建议的“Shadow DOM”方法有所帮助。

https://medium.com/@dvoytenko/amp-ios-scrolling-redo-2-the-shadow-wrapper-approach-experimental-3362ed3c2fa2 .

 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)

查看此演示 https://jsfiddle.net/rsva63ep/

关于javascript - Mobile Safari - iframe 固定内容,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54924879/

回复

使用道具 举报

懒得打字嘛,点击右侧快捷回复 【右侧内容,后台自定义】
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

关注0

粉丝2

帖子830918

发布主题
阅读排行 更多
广告位

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap