移动端滚动入门

移动Web滚动问题总结

移动端滚动方式

1. 局部滚动：

   • 原理：滚动容器固定宽高，设置overflow为scroll或auto，当子元素内容的高度大于滚动容器高度时触发滚动。

2. body滚动：

   • 原理：页面的高度内容自动撑大，body自动形成滚动条。

滚动事件scroll在不同机型下触发效果：

	body滚动	局部滚动
ios	不能实时触发	不能实时触发
安卓	实时触发	实时触发
ios wkwebview内核	实时触发	实时触发

注：wkwebview内核是ios8提供的新型wevbview内核，性能比之前的uiwebview要好。

移动端模拟滚动

1. 第一种实现方式：监听滚动元素的touchmove事件，当事件触发时修改元素transform属性来模拟滚动，当手指离开时监听touchend，调用window.requestAnimationFrame()传入一个回调函数来不断修改元素的transform属性来实现手指离开时的惯性滚动。

2. 第二种实现方式：监听滚动元素的touchmove事件，当事件触发时修改元素transform属性来模拟滚动，当手指离开时监听touchend，给元素添加css动画，设置duration和function来实现手指离开时的惯性滚动。

总结：模拟滚动的性能要比正常滚动的性能差，所以长列表滚动推荐用正常滚动。

注：window.requestAnimationFrame()是告诉浏览器您希望执行动画并请求浏览器在下一次重绘之前调用指定的函数来更新动画

下拉刷新实现

原理：

1. 下拉刷新的实现动画在页面顶部，正常情况下不可见。
2. 当页面下拉滚动时出现下拉实现动画，手指离开时收起。

实现：

1. 将下拉刷新动画元素和滚动容器放到一个div中，将下拉刷新动画元素的margin-top设为负值。
2. 当页面处于顶部时下拉，监听touchmove事件，修改滚动容器的translateY值。
3. 手指离开时监听touchend收回。