私はすべてを試みましたが、成功しませんでした。 誰かが右の画面をスクロールしているときにそれを行おうとしていると、ページ全体ではなくスクロールします。 これは私のコードです:ページ全体ではなく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
を012vの代わりに100vhにすると、それは修正されますが、この部分の高さは正確ではないので、自動的にする必要があります)100VH以上になります* フィドル:https://jsfiddle.net/adf4uu31/1/
どのようにそれはあなたがそれをスクロールしたいと今でもダイナミックな高さを持っているということでしょうか? –