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


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

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

  • 相关阅读:
    一日一技:微信开发-自定义菜单
    Redis五种数据结构
    .NET 5 部署在docker上运行
    一日一技:微信开发-发送模板消息
    Redis快速入门及应用
    面试官扎心一问:防止重复请求提交,有什么方案?
    在Windows上安装Docker
    上班摸鱼神器—VSCode 里也可以看股票 & 基金实时数据
    C# Nuget程序集StackExchange.Redis操作Redis 及 Redis 视频资源 及 相关入门指令 牛逼不,全都有
    Mongodb 更新某一条记录 C#
  • 原文地址:https://www.cnblogs.com/xiaoyaoxingchen/p/8021857.html
走看看 - 开发者的网上家园