4

次の段落では、フルスクリーン ライトボックスを使用するときに 2 つのスクロールバーが隣り合う問題を示します。ベースレイヤー (初期 html) のスクロールバーと iframe (ライトボックス) のスクロールバー。ベース スクロールバーを削除またはカバーしたい。

私の基本ページのデザインでは、ポートフォリオ アイテムの縦方向のリストが行になっています。ページはスクロールするためのものです。ポートフォリオ アイテムの画像を見るには、ユーザーは「プロジェクトの画像を表示」リンクをクリックして、ブラウザーの 100% を拡張するライトボックスを展開します。アイデアは、ライトボックスを使用してポートフォリオ画像をフローティング フルスクリーン ウィンドウの中央に配置することです。ウィンドウを閉じると、ユーザーはその下のページに戻ります。下のポートフォリオ項目のリストは長くなる可能性があるため、これは非常に重要です。Colorbox は基本的な iframe です。

前述のように、2 つのスクロールバーが隣り合っていることに問題があります。問題は次の場所で確認できます。

www.joshua-butler.com/sample/home.html

ベーススクロールバーをカバーまたは削除したいです。

同様の問題があります: jquery: ドキュメントにレイヤーを追加するときに、ドキュメントのスクロールバーをリセットするにはどうすればよいですか? （これを自分の目的に使用する方法がわかりませんでした）

誰かが Colorbox のより良い解決策を持っている場合、または簡単な修正方法を知っている場合は、お知らせください。

Thickbox、Shadowbox、Lightbox などのすべてのライトボックス ソリューションには、すべてこの問題があります。

前もって感謝します！ジョシュ

4

1 に答える 1

10

onLoadColorBox がアクティブな場合、ColorBoxとonClosedコールバックを使用して、ページoverflowを非表示に変更する (ページ スクロールバーを削除する) ことができます。

$(".iframe").colorbox({
    iframe:true, 
    width:"100%", 
    height:"100%", 
    onLoad:function() {
        $('html, body').css('overflow', 'hidden'); // page scrollbars off
    }, 
    onClosed:function() {
        $('html, body').css('overflow', ''); // page scrollbars on
    }
});
于 2012-01-02T04:32:07.603 に答える