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

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

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

转载于:https://www.cnblogs.com/xiaoyaoxingchen/p/8021857.html

  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值