0 
<div class="container1"></div>
<div class="container2"><div class="container2-inner"></div></div>

.container1 { height: 5000px; }
.container2 { height: 100%; width: 100%; position:absolute; }
.container2-inner { height: 1000px; margin: 0 auto; }

.container2-inner高さは内部のコンテンツによって異なります（.container2オーバーレイポップアップウィンドウです）。

現在、ブラウザの垂直スクロールは、5000ピクセル.container2-innerを超える場合でも、それ以上であっても常に5000ピクセルです。ポップアップウィンドウがアクティブなときにスクロールを1000ピクセルだけにしたいのですが、それでも5000ピクセルの高さを維持したいと思い.container1ます。どうすればそれを達成できますか？

4

3 に答える 3

2

私はあなたの問題を正しく理解したかどうかわかりません。

を使用して、モーダルの内側のスクロールを実現できます。

overflow:scroll

ただし、すべてのブラウザで機能するわけではありません。

私はあなたを助けるかもしれない他のスタックオーバーフローの質問でこのフィドルを見つけました。

<div id="wrapper">
    <div id="scroller">
     </div>
</div>​

#wrapper {
    width: 150px;
    overflow: hidden;
}

#scroller {
    width: 170px;
    height: 100px;
    overflow: auto;
}

Pumbaa80ありがとうございます。ここでは、スクロールバーなしでスクロール効果を実現できる#wrapperよりも#scroller20pxを与えることがわかります。

于 2012-06-05T18:11:41.853 に答える
1

.container2をモーダルポップアップにしたいようですね。ポップアップがアクティブなときに本体に設定overflow:hiddenし、ポップアップが閉じているときにそれを削除してみてください。

于 2012-06-05T17:14:26.827 に答える
1

あなたの説明に基づいてあなたの問題を理解しているのかわかりませんが、多分...

CSS

HTML, BODY {padding:0;margin:0;}
.container1 {height:5000px;background:red;}
.container2 {height:100%;width:100%;position:absolute;top:0;left:0;background:green}
.container2-inner {height:1000px;width:400px;overflow-x:hidden;overflow-y:scroll; margin:0 auto;background:yellow}

HTML

<div class="container1"></div>
<div class="container2">
    <div class="container2-inner">
    Start Here<br />
    ...<br />...<br />...<br />...<br />...<br />...<br />
    ...<br />...<br />...<br />...<br />...<br />...<br />
    ...<br />...<br />...<br />...<br />...<br />...<br />
    ...<br />...<br />...<br />...<br />...<br />...<br />
    ...<br />...<br />...<br />...<br />...<br />...<br />
    ...<br />...<br />...<br />...<br />...<br />...<br />
    ...<br />...<br />...<br />...<br />...<br />...<br />
    ...<br />...<br />...<br />...<br />...<br />...<br />
    ...<br />...<br />...<br />...<br />...<br />...<br />
    ...<br />...<br />...<br />...<br />...<br />...<br />
    ...<br />...<br />...<br />...<br />...<br />...<br />
    ...<br />...<br />...<br />...<br />...<br />...<br />
    End Here
    </div>
</div>

結果はhttp://dabblet.com/gist/2876726で確認できます。

于 2012-06-05T18:32:10.743 に答える