移动端获取页面滚动条距离顶部的距离，以及拖动惯性问题

document.getElementsByTagName('section')[0].addEventListener('touchmove',function(e){
console.log("开始滑动了touchstart");
let a = document.documentElement.scrollTop;
console.log("滑动距离为：",a);
});

jquery sectionDom.on("touchmove",function () {
console.log("触摸滚动1")
let scroll = $(document).scrollTop();

});

//touchmove  手指不放发生
$('body').on('touchmove',function(){
$('.sob').css({'display':'none'})  //隐藏div
})
//touchend   手指放开发生
$('body').on('touchend',function(){
$('.sob').css({'display':'initial','position':'fixed'})  //显示，固定div
})

// 滑动滚动条
$(window).scroll(function(){
// 滚动条距离顶部的距离 大于 200px时
if($(window).scrollTop() >= 200){
$(".scroll_top").fadeIn(1000); // 开始淡入
} else{
$(".scroll_top").stop(true,true).fadeOut(1000); // 如果小于等于 200 淡出
}
});

拖动惯性

惯性原理:
产
b496
生的速度 = 移动距离 / 移动时间
距离 = 松开的坐标 - 上次的坐标  (距离差)
时间 = 松开的时间 - 按下的时间  (时间差)

//拖动

var slide = document.querySelector('.header .h-nav'),
nav = document.querySelector('.header .nav'),
// 开始的偏移
startX = 0,
// 保存的偏移
translateX = 0,
// 手指坐标
startFinger = 0,
maxWidth = nav.offsetWidth - slide.offsetWidth,
lastTime = 0; //按下的时间
console.log(maxWidth);
slide.addEventListener('touchstart',function (e) {
e.stopPropagation();
startFinger = e.changedTouches[0].clientX;
nav.style.WebkitTransition = nav.style.transition = '';
startX = translateX;
lastTime = Date.now();
console.log(lastTime);
});
slide.addEventListener('touchmove',function (e) {
e.stopPropagation();
var nowFinger = e.changedTouches[0].clientX,
distance = nowFinger - startFinger;
translateX = distance + startX;
// 弹性
if(translateX > 0 ){ //拖动系数. 拉力的感觉
translateX *= 0.4;
}else if( translateX < -maxWidth){  //最后.
translateX = distance*0.4 + startX;
}
shift(translateX);
})
slide.addEventListener('touchend',function (e) {
/*
惯性原理:
产生的速度 = 移动距离 / 移动时间
距离 = 松开的坐标 - 上次的坐标  (距离差)
时间 = 松开的时间 - 按下的时间  (时间差)
*/
var nowFinger = e.changedTouches[0].clientX,
distance = nowFinger - startFinger,  //距离差
timeDis = Date.now() - lastTime,  //时间差
speed = (distance / timeDis)*100;
console.log(speed);  //很小 *倍数
// 惯性
translateX += speed;

// 边界 ,弹回去
if(translateX > 0){
translateX = 0;
}else if(translateX < -maxWidth){
translateX = -maxWidth;
}
// 添加贝塞尔曲线
nav.style.WebkitTransition = nav.style.transition = 'transform 500ms cubic-bezier(0.1, 0.57, 0.1, 1)';
shift(translateX);
})
function shift(value){
nav.style.WebkitTransform = nav.style.transform = 'translateX('+value+'px)';
}