我正在开发一个需要在移动设备和桌面上运行的 jQuery 灯箱类型插件。我对全屏叠加效果有疑问。根据我的研究，似乎标准的解决方案是使用 position: fixed 或 background-attachment: fixed 来实现叠加效果。当然，移动设备不支持固定定位，所以我也在想办法。
现在，我将一个函数附加到 $( window ).on( 'resize' ) 以获取窗口的新尺寸并为其设置叠加层。我看到的问题是，当我缩小窗口大小时，这会触发闪烁的滚动条，使整个事情变得非常紧张。您可以在此处查看效果:( http://jsfiddle.net/dominic_p/ZqLCx/3/ 或 http://3strandsmarketing.com/lightbox.php )。
知道如何解决这个问题吗？该代码仍在大量开发中，所以它有点乱，但我试图通过一条评论来突出显示我认为 jsFiddle 中的 2 个问题区域，内容为 "THE PROBLEM: START"。
更新:
我有一个绝妙的主意，就是将桌面浏览器的定位更改为 fixed，并且仍然依赖我的移动浏览器大小调整脚本。它似乎有很大帮助，但是当浏览器窗口开始变小时(尤其是垂直收缩时)仍然存在一些明显的闪烁。此外，当在 Android 4 上使用 position: fixed 时，屏幕侧面突然出现一个大的白色间隙，我只能在纵向模式下水平滚动到该间隙。有人知道如何解决这两个问题吗？
最佳答案
闪烁问题的解决方案似乎是设置overflow-x (或者只是 overflow 如果你愿意的话) <body> 的属性元素到 hidden .出于好奇，导致闪烁的实际上不是叠加层，而是灯箱内容。
我仍在为 Android 上出现的白色间隙而苦苦挣扎，但这是一个单独的问题，所以我将其作为解决方案发布。
关于Javascript 和 CSS 移动友好全屏覆盖，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/9386548/