今天遇到一个问题。因为之前也遇到过，解决了，但是一下子想不起来如何解决
所以，今天就把这个记录一下。
问题是这样：
body下的一个容器 section 高度为100% 宽度为100%
即该 父类是和屏幕同宽同高的.但是 section 下的 子标签的 高度超过父标签
此时在手机端的滚动 有可能会滚动顿卡。这其实因为设备是没有启用弹性滚动，或者不支持弹性滚动。
测试一下
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"> 6 <title>滚动测试</title> 7 <style> 8 * { 9 margin: 0; 10 } 11 12 html,body{ 13 height: 100%; 14 } 15 16 section { 17 width: 100%; 18 height: 100%; 19 overflow: auto; 20 -webkit-overflow-scrolling: touch; 21 } 22 23 section .app ul { 24 list-style: none; 25 padding: 0; 26 } 27 28 section .app li { 29 height: 300px; 30 } 31 32 section .app li:nth-child(odd) { 33 background: #98d; 34 } 35 section .app li:nth-child(even){ 36 background: #4d8; 37 } 38 </style> 39 </head> 40 <body> 41 <section> 42 <div class="app"> 43 <ul> 44 <li>1</li> 45 <li>2</li> 46 <li>3</li> 47 <li>4</li> 48 <li>5</li> 49 <li>6</li> 50 <li>7</li> 51 <li>8</li> 52 <li>9</li> 53 <li>10</li> 54 </ul> 55 </div> 56 </section> 57 </body> 58 </html>
用手机测试一下：
解决办法 就是给 section 增加一个
-webkit-overflow-scrolling: touch;
属性，就能解决该问题。但是，对于这个属性，developer.mozilla.org 给出的介绍是这样的：
https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-overflow-scrolling
他指出这个属性并不规范，并非所有的webkit内核浏览器都支持该属性，而且未来可能写法会改变。
但是，没办法，只能先这么解决了。 相信未来会对这个属性进行规范的。
加上这个属性之后的页面