之前遇到这样一个问题，自己写的那部分在自己的电脑和所有手机上都是ok的，但是当吧这个部分和同时的那部分合到一起的时候，出现了一个问题，那便是曾经设置overflow：auto的部分无法滑动，原本以为是两个人的代码出现了冲突，可是检查过后并不是这个原因，经过查找之后，再分析overfolw：auto盒子的高度、添加-webkit-overflow-scrolling：touch都没有用，一直到后来便用了移动端的touch的三个事件来解决这个滑动不了的问题。
这边仅仅用一个小的demo来解说一下touch的三个事件：
HTML代码：
1 <div class="box"> 2 <ul> 3 <li>hehe99</li> 4 <li>hehe88</li> 5 <li>hehe77</li> 6 <li>hehe66</li> 7 <li>hehe55</li> 8 <li>hehe44</li> 9 <li>hehe333</li> 10 <li>hehe22</li> 11 <li>hehe11</li> 12 </ul> 13 </div>
css代码：
1 * { 2 margin: 0; 3 padding: 0; 4 list-style: none; 5 } 6 7 .box { 8 margin: 100px auto; 9 height: 300px; 10 width: 100px; 11 overflow: hidden; 12 border: 1px solid #ccc; 13 -webkit-overflow-scrolling: touch; 14 } 15 16 li { 17 height: 50px; 18 background-color: pink; 19 border: 1px solid #000; 20 text-align: center; 21 line-height: 50px; 22 }
js代码：
1 var ul = document.querySelector("ul"); 2 var box = document.querySelector(".box"); 3 4 var startY = null; //手指初始位置 5 var centerY = 0; //中间值centerY 6 var maxdown = 50; //最大向下滑动距离 7 var maxup = -(ul.offsetHeight - box.offsetHeight + 50); //最大向上滑动距离 8 var maxupfantan = 0; //向上反弹设定值 9 var maxdownfantan = -(ul.offsetHeight - box.offsetHeight); //向下反弹设定值 10 ul.addEventListener("touchstart", function (e) { 11 startY = e.changedTouches[0].clientY; 12 13 }); 14 ul.addEventListener("touchmove", function (e) { 15 var dy = e.changedTouches[0].clientY - startY; 16 var temp = centerY + dy; 17 if (temp < maxup) { 18 temp = maxup; //向上滑 19 } else if (temp > maxdown) { 20 temp = maxdown; //向下滑 21 } 22 ul.style.transition = "none"; 23 ul.style.transform = "translateY(" + temp + "px)"; 24 }); 25 26 ul.addEventListener("touchend", function (e) { 27 var dy = e.changedTouches[0].clientY - startY; 28 centerY = centerY + dy; 29 if (centerY > maxupfantan) { 30 centerY = maxupfantan; //一定要注意改变centerY的值，否则会出现回不去的问题 31 ul.style.transition = "transform 0.5s"; 32 ul.style.transform = "translateY(" + maxupfantan + "px)"; 33 } else if (centerY < maxdownfantan) { 34 centerY = maxdownfantan; 35 ul.style.transition = "transform 0.5s"; 36 ul.style.transform = "translateY(" + maxdownfantan + "px)"; 37 } 38 });
这个方法便是我解决滑动不了的问题，再此与大家分享一下下，如果还有其他更好的方法来解决这个问题，还请各位大神留言，多多指教！
