一. 从未见过的-webkit-overflow-scrolling属性
在思考如何解决这个橡皮筋bug的时候，我偶然读到mui的css源码，发现其中有这么一段
body{ font-family:'Microsoft YaHei', Helvetica, sans-serif; /* line-height: 21px; */ color:#000; background-color:#efefef; -webkit-overflow-scrolling: touch;/*就是它*/ } |
又是overflow又是scrolling的，难不成这东西影响滚动效果，查看MDN得到如下答案
-webkit-overflow-scrolling 属性控制元素在移动设备上是否使用滚动回弹效果 —— MDN
取值：
**auto**：使用普通滚动, 当手指从触摸屏上移开，滚动会立即停止。
**touch**：使用具有回弹效果的滚动, 当手指从触摸屏上移开，内容会继续保持一段时间的滚动效果。继续滚动的速度和持续的时间和滚动手势的强烈程度成正比。同时也会创建一个新的堆栈上下文。
栗子：
-webkit-overflow-scrolling:touch;/* 当手指从触摸屏上移开，会保持一段时间的滚动 */
-webkit-overflow-scrolling:auto;/* 当手指从触摸屏上移开，滚动会立即停止 */
浏览器兼容性: 移动版 Safari iOS 5.0+(就是你没跑了)
二. 解决方法
大致实现思路是
页面结构
<header>头部固定<header> <divid="wrapper"> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> </ul> </div> <footer>底部固定<footer> |
样式
html{ font-size:62.5%; font-family: sans-serif; -webkit-text-size-adjust:100%; height:100%; overflow-y:hidden; } body{ margin:0; max-height:100%; overflow-y:hidden; } #wrapper{ height:100%; width:100%; overflow-y:scroll; -webkit-overflow-scrolling:touch; position:fixed; } |
