慕课网学习之-移动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上,使用顺滑滚动,有弹性

你可能感兴趣的:(慕课网学习之-移动web滚动)