移动web滚动问题

在移动端，使用滚动来处理业务逻辑的情况有很多，例如列表的滚动加载数据，下拉刷新等等都需要利用滚动的相关知识，但是滚动事件在不同的移动端机型却又有不同的表现，下面就来一一总结一下。

1. 滚动事件：即 onscroll 事件，形成原因通俗解释是当子元素的高度超过父元素的高度时且父元素的高度时定值 window 除外，就会形成滚动条，滚动分为两种：局部滚动和 body 滚动。
2. onscroll方法： 一般情况下当我们需要监听一个滚动事件时通常会用到 onscroll 方法来监听滚动事件的触发。
   如果在浏览器上调试这个方法在浏览器上很好用，但是如果跑在手机端就没有想象中的效果了。
3. body滚动：在移动端如果使用 body 滚动，意思就是页面的高度由内容自动撑大，body 自然形成滚动条，这时我们监听
   window.onscroll，发现 onscroll 并没有实时触发，只在手指触摸的屏幕上一直滑动时和滚动停止的那一刻才触发,采用了 WK 内核的 WebView 除外。
   body 滚动
   局部滚动
4. 局部滚动：在移动端如果使用局部滚动，意思就是我们的滚动在一个固定宽高的 div 内触发，将该 div 设置成overflow:scroll/auto；来形成 div 内部的滚动，这时我们监听 div 的 onscroll 发现触发的时机区分 android 和 ios 两种情况，具体可以看下面表格：

• WKWebView 内核：这里说明一下关于 ios 的 WKWebView 内核是苹果从 ios8 开始提供的新型 webview 内核，和之前的 UIWebView 相比，性能要好，具体大家可以自行查看关于 WKWebView 的相关概念。
• body 滚动和局部滚动 demo：这里我需要指出的是在采用 WKWebView 内核的页面中 scroll 是可以实时触发的，如果使用的是原本的 UIWebView 则不能够实时触发，手Q目前使用的是 UIWebView 而新版微信使用的是 WKWebView，大家可以分别使用来尝试一下下面的demo：
  局部滚动：https://oc5n93kni.qnssl.com/divscrollv2.html
  body 滚动：https://oc5n93kni.qnssl.com/bodyscrollv1.html

分别用 ios 手Q和微信和 android 手Q体验会有不同的结果。