Javascript和CSS移动设备友好全屏覆盖

我正在研究一个jQuery的灯箱类型插件，需要为移动设备和桌面功能。我遇到了全屏叠加效果的问题。从我的研究看来，标准解决方案似乎是使用position: fixed或background-attachment: fixed来实现叠加效果。当然，移动设备不支持固定定位，所以我试图找到另一种方式。Javascript和CSS移动设备友好全屏覆盖

现在，我将一个函数附加到$(window).on('resize')以获取窗口的新尺寸并为它们设置叠加层。我看到的问题是，这是触发闪烁的滚动条，当我缩小窗口大小时，会使整个事情变得非常激动。你可以在这里看到效果：（http://jsfiddle.net/dominic_p/ZqLCx/3/或http://3strandsmarketing.com/lightbox.php）。

任何想法如何解决这个问题？该代码仍处于繁重的发展阶段，所以它有点乱，但我试图突出显示我认为jsFiddle中的两个问题区域的内容，其中有一条评论说"THE PROBLEM: START"。

UPDATE： 我有一个绝妙的主意，以定位只是改变以fixed的桌面浏览器，仍然依靠我的移动浏览器调整脚本。它似乎有很大的帮助，但浏览器窗口开始变小时（特别是垂直缩小时）仍然有一些明显的闪烁。此外，在Android 4上使用position: fixed时，屏幕侧面会突然出现一个大的白色空白，我只能在肖像模式下水平滚动。任何人都有如何解决这两个问题的想法？

来源

2012-02-21 Dominic P

我没有看到闪烁 – 2012-02-22 03:57:56

这很奇怪。你使用的是什么浏览器？在我测试过的一些浏览器上，滚动条不会显示，但居中的内容会跳转，就好像它们闪烁着。 – 2012-02-22 06:24:23

我检查了铬和ie9 – 2012-02-22 15:29:32

闪烁问题的解决方案似乎是将<body>元素的overflow-x（或者只是overflow）属性设置为hidden。出于好奇，它实际上不是覆盖层，而是导致闪烁的灯箱内容。

我还在努力解决Android上出现的白色差距，但这是一个单独的问题，所以我将其作为解决方案发布。

来源

2012-02-28 19:54:12

Javascript和CSS移动设备友好全屏覆盖

回答

相关问题