javascript - 试图只滚动 div，而不是整个页面

Question

我尝试了所有方法，但没有成功。我试图做到这一点，当有人滚动右屏幕时，他只会滚动他而不是整个页面。 这是我的代码:

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');
});

** 请注意，我知道如果我在 .new content 上将 height 设置为 100vh 而不是 auto，它将是固定，但我不知道这部分的确切高度，因此我需要它是自动的(它将超过 100vh)。* fiddle : https://jsfiddle.net/adf4uu31/1/

Answer 1

将 content-container 设置为 position : fixed 并将 new-content 设置为 float :right CSS