Javascript和CSS移动友好全屏叠加

Javascript and CSS Mobile Friendly Full Screen Overlay

本文关键字：叠加 CSS 移动 Javascript 更新时间：2023-09-26

我正在开发一个jQuery灯箱类型的插件，该插件需要为移动设备和台式机运行。全屏叠加效果有问题。从我的研究来看，这方面的标准解决方案似乎是使用position: fixed或background-attachment: fixed来实现叠加效果。当然，移动设备不支持固定定位，所以我正试图找到另一种方法。

现在，我正在为$( window ).on( 'resize' )附加一个函数，以获取窗口的新维度，并为其设置覆盖。我看到的问题是，当我缩小窗口时，这会触发闪烁的滚动条，使整个事情变得非常紧张。您可以在此处看到效果：(http://jsfiddle.net/dominic_p/ZqLCx/3/或http://3strandsmarketing.com/lightbox.php)。

知道我该怎么解决这个问题吗？代码仍在大量开发中，所以有点混乱，但我试图用一条注释"THE PROBLEM: START"来强调我认为jsFiddle中的两个问题领域。

更新：我有一个绝妙的主意，只需将桌面浏览器的定位更改为fixed，并且仍然依赖于我为移动浏览器调整大小的脚本。这似乎有很大帮助，但当浏览器窗口开始变小时（尤其是垂直缩小时），仍然会有一些明显的闪烁。此外，当在Android 4上使用position: fixed时，屏幕一侧突然出现一个大的白色间隙，我只能在人像模式下水平滚动到该间隙。有人知道如何解决这两个问题吗？

闪烁问题的解决方案似乎是将<body>元素的overflow-x（如果您愿意，则仅为overflow）属性设置为hidden。出于好奇，引起闪烁的实际上不是覆盖层，而是灯箱内容。

我仍然在为安卓系统上出现的空白而挣扎，但这是一个单独的问题，所以我将此作为解决方案发布。