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

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

新老客户大回馈,云服务器低至5折

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

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

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:鼠标拖拽删除

下一篇:JavaScript学习总结(一)——ECMAScript、BOM、DOM(核心、浏览器