技术会淘汰，思路永不会。
一、目的
写个插件是要解决问题的，所以此插件的解决如下问题：
1.在微信里，滑动到顶部或底部时，出现网址、版权等黑底。
2.在微信里，如果局部用浏览器自带的overflow-y:auto(默认)或overflow:scroll,浮动在顶部或底部（如头部，底部导航等）就会抖动或移位（用户体验稍微差些）
注意：如不在乎微信滑动出现黑底，但又要实现局部滑动仿原生用户体验，用css实现即可
二、原理
用transform3d代替传统的滚动。
为什么用它,而不用top、margin-top，可以具体了解什么是回流(reflows)与重绘(repaints).
总结：兼容情况下，用它性能好（体验好）。不兼容就降级吧。
三、思路
通过手势信息来获取到坐标，出现手势如下：
1.慢速滑动
2.快速滑动
3.快速滑动后，滑动还没完成，触摸屏幕可以停止
操作元素位移时，考虑如下几点：
1.向上滑动时，滑动到顶部就不能移动了，相当于可视区域的高度大于等于屏幕高度
2.向下滑动时，滑动到底部就不能移动了，相当于Y坐标不能大于0
3.计算加速度来判断是否快速滑动
touchmove过程获取最后3点信息(X坐标,Y坐标，时间)。然后计算他们的瞬时速度，最后计算出加速度，如果加速度超过一个数值，就是快速滑动。
4.快速滑动后，有减速效果然后静止
5.判断是上下滑动还是左右滑动
displacementX:横向滑动的位移
displacementY:纵向滑动的位移
Math.abs(displacementY) > Math.abs(displacementX) && displacementY < 0
向上滑动
Math.abs(displacementY) > Math.abs(displacementX) && displacementY > 0
向下滑动
6.获取的坐标操作transform：translate3d（x,y,z）,需要判断浏览对它的兼容性。
let _vendor;
let _elementStyle = document.createElement('div').style;
( () => {
const vendors = ['t'+'webkitT', 'MozT', 'msT', 'OT'],
l = vendors.length;
let _transform,
i = 0;
for ( ; i < l; i++ ) {
_transform = vendors[i] + 'ransform';
if ( _transform in _elementStyle ) {
_vendor = vendors[i].substr(0, vendors[i].length-1);
return false;
}
}
})();
7.快速移动时，触摸让滚动停止
首先理解transform工作原理和transform中的Matrix(矩阵)。touchstart时，去获取它的此时的坐标，可以通过获取matrix来获取坐标值：
matrix(a,b,c,d,e,f)
matrix(1, 0, 0, 1, 0, -100)
本人总结的abcd不用管它是什么,只要知道e代表x坐标,f代表y坐标.当touchstart时，此时的x=0,y=-100;
let style = window.getComputedStyle(document.querySelector('.kz-section').children[0]);
let matrix = style[transform].split(')')[0].split(', ');
transformY = (Math.round(matrix[13]*100)/100) || (Math.round(matrix[5]*100)/100);
注意：此时transform是变量，根据浏览器兼容性而定，它可能是transform、webkitTransform、MozTransform、msTransform、OTransform，具体实现查看源代码。
如果设置了transition-duration的值，触摸停止时，实际坐标和获取的transformY有误差，代码如下
let duration = 1000 //transition-duration的变量名
currentY = transformY + duration/1000 * pageY
网友评论