webkit内核浏览器手机端滚动顿卡处理方法

今天遇到一个问题。因为之前也遇到过，解决了，但是一下子想不起来如何解决

所以，今天就把这个记录一下。

问题是这样：

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内核浏览器都支持该属性，而且未来可能写法会改变。

但是，没办法，只能先这么解决了。相信未来会对这个属性进行规范的。

加上这个属性之后的页面

webkit内核浏览器 手机端 滚动顿卡 处理方法

webkit内核浏览器手机端滚动顿卡处理方法