原生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，這樣滾動的距離才是我們想要的。
})