移动端页面滚动

页面是一个全屏滚动列表，在移动端IOS上会出现皮筋效果，就是当页面拉到尽头的时候还能再继续拉动，露出浏览器的底色，松手会回弹回去。

为处理这个问题，建议使用一个全屏的中间层代替页面，使用这个中间层的滚动。

像VUE这样的单页应用，可以让作为页面的组件width:100vh，为了让H5拥有原生组件的惯性滑动效果，需要使用 -webkit-overflow-scrolling:touch;

width:100vh;  -webkit-overflow-scrolling:touch;  会有冲突，会让页面卡死，需要增加一个中间层

中间层height:100%; position:absolute; -webkit-overflow-scrolling:touch;

另外，如果 -webkit-overflow-scrolling:touch; 的组件中有positon:fixed; 的组件，滑动组件会卡死，这些组件需要和滑动组件分开。

scss

.page {

   width:100vw;

   height:100vh;

   overflow:hidden;

   background-color:#F5F5F5;    /*若果每个页的背景色不同，可在这里设定，不要修改body样式，会造成全局污染*/

   box-sizing:border-box;

   position:relative;

    .mid { /*中间层，用于滚动*/

        -webkit-overflow-scrolling:touch;

        position:absolute;

        overflow:scroll;

        left:0;

        top:0;

        background-color:#F5F5F5;

        box-sizing:border-box;

        .items {/*滚动内容*/

                ........

        }

      }

      .fixed-item { /*fiexed布局的内容，能和-webkit-overflow-scrolling:touch;的滚动层分开 */

               .......................

        }

    }

}