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

**请注意，我知道如果我height .new content代替auto而不是{{1}}它将被修复，但我不会确切地知道这部分的高度，因此我需要它自动（它将超过100vh）。* 小提琴： https://jsfiddle.net/adf4uu31/1/

Answer 1

将content-container设为position : fixed并在{c>中将new-content设为float :right

Answer 2

如果我理解正确，你确实希望右侧窗格滚动，这样它就不会变大，但由于列表可能更短，所以你不想给它一个固定值。在这种情况下，您可以使用

.new-content {
  max-height: 100vh;
}

Answer 3

将height课程中的.new-content更新为100vh。像这样：https://jsfiddle.net/adf4uu31/2/

Answer 4

如果容器的高度未固定，则div元素高度随着内容的增长而增加，这将避免滚动条。因此，您需要具有与滚动条交互的固定高度。

＆＃13;

$(document).ready(function(){
$('#button').click(function(){
  $('.new-content').css({'height' : '100vh' }).toggleClass('half').delay(600).fadeIn(100);
  $('.content-container').toggleClass('half');
});
});

＆＃13;

.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;
  overflow : auto;
}
.new-content {
  display: none;
  overflow: auto;
  float: left;
  width: 0;
  height: auto;
  background: #f60;
}
.new-content.half,
.content-container.half {
  width: 50%;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.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>

＆＃13;

试图只滚动div，而不是整页

4 个答案: