平板电脑效果页面

Question

我有问题像平板电脑一样创建滚动效果。

这是我的简单代码。 jsfiddle

HTML

<div class="blank"></div>
<div class="outer">
  <div class="inner">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis officia voluptas distinctio dolore quod.   Minima delectus nisi sapiente nostrum, illum ea explicabo quae veritatis accusamus earum sequi ipsa. Aspernatur, rerum!</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis officia voluptas distinctio dolore quod.   Minima delectus nisi sapiente nostrum, illum ea explicabo quae veritatis accusamus earum sequi ipsa. Aspernatur, rerum!</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis officia voluptas distinctio dolore quod.   Minima delectus nisi sapiente nostrum, illum ea explicabo quae veritatis accusamus earum sequi ipsa. Aspernatur, rerum!</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis officia voluptas distinctio dolore quod.   Minima delectus nisi sapiente nostrum, illum ea explicabo quae veritatis accusamus earum sequi ipsa. Aspernatur, rerum!</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis officia voluptas distinctio dolore quod.   Minima delectus nisi sapiente nostrum, illum ea explicabo quae veritatis accusamus earum sequi ipsa. Aspernatur, rerum!</p>    
  </div>
</div>
<div class="blank big"></div>

CSS

.blank{
  height: 400px;
  &.big{
    height: 800px;
  }
}
.outer{
  position: relative;
  width: 300px;
  height: 400px;
  background-color: red;
  margin: 0 auto;
  overflow: hidden;
}
.inner{
  position: absolute;
  top: 20px;
  left: 20px;
  right: 20px;
  bottom: 50px;
  height: calc(100% - 20px -50px);
  background-color: #fff;
  overflow: hidden;
  overflow-y: visible;
}

当滚动页面时，会出现框（.outer），当它出现在屏幕中间时，我希望页面停止，只有第二个框（.inner）滚动，直到内容结束（最好的选择是第二个滚动条）。然后页面应继续正常滚动。

Any1可以帮助我吗？