2012-02-21 9 views
0

モバイルデバイスとデスクトップで機能する必要のあるjQueryライトボックスタイプのプラグインを開発中です。全画面オーバーレイ効果に問題があります。私の研究から、これのための標準的な解決策は、オーバーレイ効果を達成するためにposition: fixedまたはbackground-attachment: fixedを使用することであるようです。もちろん、モバイル機器は固定位置をサポートしていないため、私は別の方法を見つけようとしています。JavascriptとCSSモバイルフレンドリーフルスクリーンオーバーレイ

今、ウィンドウの新しい寸法を取得し、それらにオーバーレイを設定するために、$(window).on('resize')に関数を追加します。私が見ている問題は、ウィンドウのサイズを小さくすると全体が本当に不安定になる点滅するスクロールバーが起動されていることです。ここで効果を見ることができます:(http://jsfiddle.net/dominic_p/ZqLCx/3/またはhttp://3strandsmarketing.com/lightbox.php)。

どうすればこの問題を解決できますか?コードは依然として重い展開であるため、混乱の種ですが、私は、2つの問題領域がjsFiddleにあると考えて、"THE PROBLEM: START"というコメントで強調表示しようとしました。

UPDATE: 私は、デスクトップブラウザ用fixedに位置を変更し、まだ携帯電話のブラウザのための私のリサイズスクリプトに頼る素晴らしいアイデアを持っていました。それは多くの助けになっているようですが、ブラウザウィンドウが小さくなる(特に垂直に縮小する)ときには、まだまだ大きなちらつきがあります。また、Android 4でposition: fixedを使用している場合、画面の横に大きな白い隙間があり、縦方向にしか横にスクロールできません。誰もがいずれかの問題を解決する方法のアイデアを持っていますか?

+0

私はちらつきが見えません –

+0

それは奇妙です。どのブラウザを使用していますか?私がテストしたいくつかのブラウザでは、スクロールバーは表示されませんでしたが、中央のコンテンツは点滅しているかのように飛び回ります。 –

+0

私はクロムをチェックしています。つまり、 –

答えて

0

フリッカ問題の解決策は、hidden<body>要素のoverflow-x(または単にoverflowあなたが好む場合)プロパティを設定することのようです。好奇心のために、実際にはオーバーレイレイヤーではなく、フリッカーを引き起こしていたライトボックスの内容でした。

私はまだAndroidに表示される白い隙間に苦しんでいますが、これは別の問題ですので、これを解決策として投稿しています。

関連する問題