有个需求，需要知道用户在是否已经滚动到元素的顶部或底部，对应进行不同的操作。 解决有关滑动问题的过程中，总会出现clientHeight、offsetHeight、scrollHeight、scrollTop等。先整理相关概念。
offsetHeight
代表元素的高度.
offsetHeight=元素的高度 +border + padding +水平滚动条
clientHeight
clientHeight = 元素的高度 +padding
scrollTop
为元素滚动时隐藏的部分
scrollHeight
一个元素内容高度的度量，包括由于溢出导致的视图中不可见内容。
只有当元素出现滚动时才有意义，元素不滚动时候，scrollHeight==clientHeight
当元素滚动时，scrollHeight的值为scrollTop+clientHeight
offsetTop
当前元素顶部距离最近父元素顶部的距离
实现
监听touchstart事件，得到首次触摸的y坐标值
touchstar(e){
this.starY = e.targetTouches[0].clientY;
},
监听touchmove事件，得到滑动过程中的y轴坐标，clientY > stratY的滑动方向向下，滑动距离scrollTop 为0则表明为用户的滑动位置在元素最顶部。
clientY < stratY 表明滑动方向向上，scrollTop + offsetHeight >=scrollHeight则表明已经滑动到了元素的最底部。
move(e){
let target = document.getElementById('move')
let offsetHeight = target.offsetHeight;
let scrollHeight = target.scrollHeight;
let scrollTop = target.scrollTop
let changedTouches = e. changedTouches
if(changedTouches.length > 0){
let touch = changedTouches[0] || {};
let moveY = touch.clientY;
if(moveY >this.y && scrollTop === 0){
console.log('顶部临界条件')
} else if(moveY < this.starY && scrollTop +offsetHeight >=scrollHeight){
console.log('滑动到底部临界条件')
}
}
},
