0

Facebookがライトボックスタイプの形式で写真を表示する方法を複製しようとしています。私が複製に問題を抱えている唯一のことは、実際のスクロールバーが内部にない状態でサイドバーを離れることを達成する方法です...

誰でもこれを見る最善の方法は、ライトボックス効果が動作しているように、Facebook に写真を表示することだと思います。サイドバーに注目してください。これを達成するための提案や方法はありますか？スクロール バーの特定のノードをターゲットにする方法はありますか?

ありがとう。jQuery は、このプロジェクトに最適なライブラリです。

4

1 に答える 1

2

正直なところ、これは主にCSSです。

このフィドルを見てください：http://jsfiddle.net/ktd29/11/

私は、Facebook のやり方を真似て、世界で最悪のライトボックスを作成しました。赤い四角は画像を表し、黒い四角は半透明のオーバーレイを表します。

スクロールバーが無効になるリンクをクリックするまで、本体がスクロール可能であることがわかります。

div半透明のオーバーレイは、幅と高さが 100%の絶対配置です。

div {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background: rgba(0,0,0,0.7);
    overflow-y: scroll;
    display: none;
}

この div に関する最後の注意事項は、overflow-y実際scrollにスクロール可能かどうかに関係なく、スクロールバーが常に存在することを意味します。

ドキュメントの高さは非常に大きく設定されているため、ライトボックスを見ていなくてもページをスクロールできます。ライトボックスを呼び出すコードは次のとおりです。

jQuery(document).ready(function($) {
    $('a').click(function(){
        $('div').addClass('shown');
        $('html').addClass('noScroll');
    });
});

これはあなたが期待するものです。この例では文字通りだけですが、HTMLに適用されているdisplay: block;クラスに注意してください。これは、元のスクロールバーを削除する html にnoScroll適用されます。overflow-y: hidden;これにより、2 つのスクロールバー (html 用とオーバーレイ div 用) がなくなります。

何か明確にする必要がある場合はお知らせください。

</p>

于 2012-11-28T09:53:38.850 に答える