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

2018-06-24 01:00:34来源：未知阅读 ()

　　之前遇到这样一个问题，自己写的那部分在自己的电脑和所有手机上都是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 });