页面是一个全屏滚动列表,在移动端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;的滚动层分开 */
.......................
}
}
}