我尝试了一切,但没有成功。 我试图做到这一点时,有人滚动右屏幕,他将只滚动他,而不是整个页面。 这是我的代码:试图只滚动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/
它怎么说,你想让它滚动,仍然有一个动态的高度? –