Jquery 页面上的平板效果

我有一个问题，创造像平板电脑滚动效果

这是我的简单代码。

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>

当页面滚动时，框（.OUT）出现，当它在屏幕中间时，我希望页面停止，只有第二个框（.No.）滚动直到内容结束（最佳选项将是WITCHOUT第二滚动条）。然后页面应继续正常滚动

有人能帮我吗

.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;
}