防止基础div滚动

Question

如果有办法使固定元素滚动并防止父div滚动

HTML

<div class="container">
 <div class="fixed">
   Long content
  </div>
</div>

Css

.container {
  height: 2000px;
  background: green;
}

.fixed {
  position: fixed;
  overflow-y: scroll;
  top: 0;
  width: 100%;
  height: 1000px;
  z-index: 20;
  background:#EABFCB;
}

JSFiddle

我真的很期待只有CSS的解决方案

Answer 1

在<div>内使用另一个.fixed，并限制其高度。

.container {
  height: 2000px;
  background: green;
}

.fixed {
  position: fixed;
  overflow-y: scroll;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 20;
  background:#EABFCB;
}

.fixed div {
  height: 1000px;
}

<div class="container">
 <div class="fixed">
   <div>
     Long content
   </div>
  </div>
</div>

Answer 2

设置。容器是流动的，可以使容器位置固定。