关于移动端的滑动无效的问题

　　之前遇到这样一个问题，自己写的那部分在自己的电脑和所有手机上都是ok的，但是当把这个部分和同事的那部分合到一起的时候，出现了一个问题，那便是曾经设置overflow：auto的部分无法滑动，原本以为是两个人的代码出现了冲突，可是检查过后并不是这个原因，经过查找之后，再分析overfolw：auto盒子的高度、添加-webkit-overflow-scrolling：touch都没有用，一直到后来便用了移动端的touch的三个事件来解决这个滑动不了的问题。

　　这边仅仅用一个小的demo来解说一下touch的三个事件：

HTML代码：

<div class="box">
  <ul>
    <li>hehe99</li>
    <li>hehe88</li>
    <li>hehe77</li>
    <li>hehe66</li>
    <li>hehe55</li>
    <li>hehe44</li>
    <li>hehe333</li>
    <li>hehe22</li>
    <li>hehe11</li>
  </ul>
</div>

css代码：

* {
  margin: 0;
  padding: 0;
  list-style: none;
}

.box {
  margin: 100px auto;
  height: 300px;
  width: 100px;
  overflow: hidden;
  border: 1px solid #ccc;
  -webkit-overflow-scrolling: touch;
}

li {
  height: 50px;
  background-color: pink;
  border: 1px solid #000;
  text-align: center;
  line-height: 50px;
}

js代码：

var ul = document.querySelector("ul");
var box = document.querySelector(".box");

var startY = null;  //手指初始位置
var centerY = 0;  //中间值centerY
var maxdown = 50;   //最大向下滑动距离
var maxup = -(ul.offsetHeight - box.offsetHeight + 50);  //最大向上滑动距离
var maxupfantan = 0;  //向上反弹设定值
var maxdownfantan = -(ul.offsetHeight - box.offsetHeight);  //向下反弹设定值
ul.addEventListener("touchstart", function (e) {
  startY = e.changedTouches[0].clientY;

});
ul.addEventListener("touchmove", function (e) {
  var dy = e.changedTouches[0].clientY - startY;
  var temp = centerY + dy;
  if (temp < maxup) {
    temp = maxup;    //向上滑
  } else if (temp > maxdown) {
    temp = maxdown;  //向下滑
  }
  ul.style.transition = "none";
  ul.style.transform = "translateY(" + temp + "px)";
});

ul.addEventListener("touchend", function (e) {
  var dy = e.changedTouches[0].clientY - startY;
  centerY = centerY + dy;
  if (centerY > maxupfantan) {
    centerY = maxupfantan;  //一定要注意改变centerY的值，否则会出现回不去的问题
    ul.style.transition = "transform 0.5s";
    ul.style.transform = "translateY(" + maxupfantan + "px)";
  } else if (centerY < maxdownfantan) {
    centerY = maxdownfantan;
    ul.style.transition = "transform 0.5s";
    ul.style.transform = "translateY(" + maxdownfantan + "px)";
  }
});

　　这个方法便是我解决滑动不了的问题，再此与大家分享一下下，如果还有其他更好的方法来解决这个问题，还请各位大神留言，多多指教！