慕课网学习之-移动web滚动

移动端的滚动方式及滚动原理
1.body滚动：意思是页面的高度由内容自动撑大，body自然形成滚动条，一般不做处理默认的都是body滚动

body.jpeg
2.局部滚动:意思就是我们的滚动在一个固定宽高的div内触发，将该div设置为overflow:scroll/auto;来形成div内部的滚动，滚动条出现在div内部
scroll.jpeg
3.模拟滚动，典型例子为iscroll，原理有两种:
a.监听滚动元素的touchmove事件，当事件触发时修改元素的transform属性来实现元素的位移,当手指离开时触发touchend事件，然后采用requestanimationframe来在一个线型函数下不断的修改元素的transform来实现手指离开时的一段惯性滚动距离；
b.监听滚动元素的touchmove事件，当事件触发时修改元素的transform属性来实现元素位移，当手指离开时触发touchend事件，然后给元素一个css的animation,并设置好duration和function来实现手指离开时的一段惯性距离
当使用模拟滚动时，浏览器在javascript层面会消耗更多的性能去改变dom元素的位置，在dom复杂层级深的页面更为高，所以在长列表滚动时还要使用正常滚动好
局部滚动不能乱用，每当用一个局部滚动时，webview都会在终端生成一个原生的scrollView,可能会带来更多的手机webview内存消耗。
*-weblit-overflow-scrolling:touch表示在IOS上，使用顺滑滚动，有弹性