我嘗試了一切,但沒有成功。 我試圖做到這一點時,有人滾動右屏幕,他將只滾動他,而不是整個頁面。 這是我的代碼:試圖只滾動div,而不是整個頁面
HTML:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="content-container">
<div class="content">
<div>text</div>
<div>text</div>
<div>text</div>
<button id="button">
Click me
</button>
</div>
</div>
<div class="new-content">
<p>text</p><p>text</p><p>text</p><p>text</p><p>text</p><p>text</p><p>text</p><p>text</p><p>text</p><p>text</p><p>text</p><p>text</p><p>text</p><p>text</p><p>text</p><p>text</p><p>text</p><p>text</p><p>text</p><p>text</p><p>text</p><p>text</p>
</div>
CSS:
.content {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
width: 100%;
}
.content-container {
height: 100vh;
display: block;
background: #ddd;
float: left;
width: 100%;
position: relative;
}
.new-content {
display: none;
overflow: auto;
float: left;
width: 0;
height: auto;
background: #f60;
}
.new-content.half,
.content-container.half {
width: 50%;
}
JS:
$('#button').click(function(){
$('.new-content').toggleClass('half').delay(600).fadeIn(100);
$('.content-container').toggleClass('half');
});
**請注意,我知道如果我將height
設置爲.new content
而不是auto
的100vh,它將被修復,但我不知道這部分的高度,因此我需要它是auto(它將超過100vh)* 小提琴:https://jsfiddle.net/adf4uu31/1/
它怎麼說,你想讓它滾動,仍然有一個動態的高度? –