Tricky длины CSS прокрутки

Question

<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 является наложением всплывающего окна).

В настоящее время вертикальная брошюра браузера всегда 5000px независимо от того, что ИЛИ еще, если .container2-inner превышает 5000px. Я бы хотел, чтобы прокрутка была всего лишь 1000 пикселей, когда всплывающее окно активно, но я все еще хочу сохранить высоту 5000px .container1 ниже. Как мне это достичь?

Answer 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

Answer 2

Похоже, вы хотите .container2 быть модальным всплывающим окном? Попробуйте установить overflow:hidden на тело, когда всплывающее окно активно, и удалите его, когда он закрыт.

Answer 3

Я не знаю, правильно ли я понял вашу проблему.

Вы можете добиться внутреннего прокрутки модального использования.

overflow:scroll 

Но он не работает во всех браузерах.

Я нашел это fiddle на другом Stack Overflow Question, который может вам помочь.

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

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

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

спасибо Pumbaa80. Здесь вы можете увидеть, что #scroller 20px больше, чем #wrapper, вы можете добиться эффекта прокрутки без полосы прокрутки.