Position fixed Inner content list 滚动卡顿

在做项目的过程中，总是会遇到要实现一个弹出视图，多数需求都是在弹出视图中添加一个滚动列表，使弹出视图撑满整个屏幕，并固定在屏幕上方，一般都会想到使用position: fixed 将top, left, right ,bottom 都设置为0，这样就能撑满整个屏幕，在当前窗口弹出一个固定位置的视图大小，示例如下代码

html, body {
  margin: 0 auto;
}

.model-fixed-view {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: 30px;
}

现在.model-fixed-view这个视图已经固定在屏幕上方距离边界30px的位置，那接下来需要在上面加载一个列表，并能滚动例如。

scroll-text.png

在html中一般只要内部视图超出屏幕高度，就会自动滚动加载。如下设置一个视图高度很高的样式，来模拟滚动的操作。

.content {
  background-color: blue;
  height: 2000px;
}

样式展示

<div class="model-fixed-view">
  <div class="content">ddd</div>
</div>

但是这样写之后会发现一个问题，内部视图虽然已将远远超出父视图的高度，但是内部视图不能滚动加载，即使能滚动加载，在手机上滑动滚动的时候依然很少卡顿，在试了各种办法之后，依然效果不好，网上搜集资料找到了如下解决办法。

解决fixed content滑动卡顿，不滑动的问题

找了一些办法，只要在设置fixed父视图中添加如下的样式，就可以解决滑动卡顿，滑动不流畅的问题

.model-fixed-view {
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
}

参考链接：
https://css-tricks.com/forums/topic/prevent-body-scrolling-when-the-user-scrolls-on-fixed-position-div/