原生js实现元素随手指滑动上下滚动

想要实现的效果是在hidden中的子元素detail高度是由内容决定的。有可能会超出父元素的100px，就会被隐藏，这里实现手指滑动屏幕使detail可以根据滑动上下滚动，显示出隐藏部分。

需要监听的元素detail

<div id="hidden" style="width:100px;height:100px;overflow:hidden;">
　　<div id="detail" style="width:100%;height:auto;"></div>
<div>

我们想要实现的效果是手指触摸到屏幕->手指滑动屏幕->滑动完成，元素滚动。这个滑动的距离就是detail需要滚动的距离。

计算这个距离是比较关键的点。我们需要一个变量来保存开始点。还需要保存一些关键的计算值，如滚动距离等。

var optionsY = "";  //开始点
var trans = 0; //滚动距离
var height = document.getElementById("detail").clientHeight; //detail的高度
var fatherHeight = document.getElementById("hidden").clientHeight; //hidden的高度

获取开始点时是监听元素的屏幕触摸时间touchstart。注意这里没有驼峰写法。

document.getElementById("detail").addEventListener("touchstart",function(data){
   optionsY = data.touches[0].pageY; //保存开始点Y轴位置
})

当手指触摸屏幕时，调用返回函数。从返回的data里面取touches[0]，这就是当前我们触摸的点。pageY就是触摸点的y轴坐标。初始点保存完成。

下一步就是根据滑动距离滚动元素。监听元素的屏幕滑动事件touchmove。 

document.getElementById("detail").addEventListener("touchmove",function(data){
   var pageY = data.touches[0].pageY;  //获取结束点Y轴位置
   trans = trans + pageY - optionsY;   //获取滚动距离，滚动距离是叠加的，所以要保存滚动距离。每次的滚动距离等于保存的滚动距离加上这次滑动的距离。比如我们每次滑动距离都是向下滑动10px，元素向下滚动10px。那么10次过后这个元素距离应该就是向下滚动了100px，而不是滚动了10px。
不管是向上还是向下，都加加起来赋给details就可以啦
   if(0-trans>= height - fatherHeight){   
      trans = 0 - height + fatherHeight     
   }  //但是details元素滚动距离也是有限制的。向上大于0时不能往上滚了，向下大于它的高度时也不能往下滚了。当然为了更好的体验程度，可以适当放宽距离。这里最大向下滚动距离为details的高度减去它的父元素的高度。
   if(trans>=0){
      trans = 0;
   }
   document.getElementById("detail").style.transform = 'translateY('+trans+'px)';//这里设置元素的滚动距离。
   optionsY = pageY   //由于touchMove是手指一直触摸就会一直触发，如果开始点一直不变，滚动距离就是这样子的。第一次滑动时，就会累加很多次的滑动距离。举个例子，开始点10，从10滑到20，触发了10次的touchMove时间（举例，不止10次）
，滑动距离就是0+1+2...+10;于是就需要把每次的结束点存当做下一次的开始点。这样子，还是还是上面那个例子就回事0+1+1+1..+1，这样滚动的距离才是我们想要的。
})