2016-07-13 20 views
2

私はLightboxを通して内容を表示するためにMagnific Popupを使っています。Magnific Popupはライトボックスの前にスクロールバーを表示します

最初は、スクロールバーが消える問題と、ライトボックスの背後にあるコンテンツが右側に移動する問題がありました。

だから、 を追加しました。html {overflow-y:scroll; } となり、スクロールバーは表示されたままになり、右側には動きません。

問題は、ライトボックスの上にスクロールバーが表示されることです。これは望ましくないことがわかります。

あなたは(プレースホルダをクリックしてください)ページの簡易版で、ここで問題を見ることができます: http://test.ilgufoblu.net/lab/prova.html

それも修正可能だ場合、この問題を解決する方法はありませんアイデア。あなたの例では

答えて

1

は、私が追加した場合bodyに(あなたが視覚的にパディングと再作成することができます)とhtmlからoverflow-y: scrollを削除(またはautoと交換)margin: 0;、私は希望通りに振る舞うと信じています。ここでフィドルです:https://jsfiddle.net/523mcv1k/

+0

うん、それは動作します。より複雑な元のページではまだ動作しないため、実際にはページのバージョンが合理化されていることがわかりました。新しい質問を投稿する必要があります。ありがとう。 – FuzzeeLowgeek

+0

あなたの新しいコードでは、 "ダブル"スクロールバーを避けて、右への移動を避けるために、 "html"から 'overflow-y:scroll'を削除しなければならないと思います。オープンコールバックで、 'padding-right:17px'と' overflow:hidden'を 'body'に追加して、closeコールバックでそれらのスタイルを削除します(おそらく、最も簡単でクリーンです。コールバック、私は思うだろう)。 –

+0

それは非常に良い点です。しかし、すべての主要ブラウザで17pxのスクロールバーが使用されていますか?私はそれをチェックさせてください。 – FuzzeeLowgeek

関連する問題