码迷,mamicode.com
首页 > 微信 > 详细

微信H5禁止下拉 且可下滚动指定区域

时间:2019-07-14 23:53:02      阅读:910      评论:0      收藏:0      [点我收藏+]

标签:ges   document   art   oom   手机   lis   坐标   csharp   touch   

 var app = document.getElementsByClassName("tree-hole-room-messages")[0];
    var touchstartY;
    app.addEventListener(
      "touchstart",
      function(event) {
        console.log(1);
        var events = event.touches[0] || event;
        touchstartY = events.clientY; //获取触摸目标在视口中的y坐标
      },
      false
    );

    app.addEventListener(
      "touchmove",
      function(event) {
        var events = event.touches[0] || event;
        //注意app.scrollTop始终为0
        var scrollTop = app.scrollTop || document.documentElement.scrollTop; //获取滚动部分的高度
        var clientHeight = document.documentElement.clientHeight; //获取手机屏幕高度(可视部分高度)
        var scrollHeight = app.scrollHeight; //所有内容的高度
        if (
          events.clientY > touchstartY &&
          scrollTop === 0 &&
          event.cancelable
        ) {
          event.preventDefault(); //禁止到顶下拉
        } else if (
          scrollTop + clientHeight > scrollHeight &&
          event.cancelable
        ) {
          // event.preventDefault(); //禁止到底上拉
        }
      },
      false
    );

  

代码实现在tree-hole-room-messages这个滚动区域内下拉不会出现。

且可用滚动这个区域

微信H5禁止下拉 且可下滚动指定区域

标签:ges   document   art   oom   手机   lis   坐标   csharp   touch   

原文地址:https://www.cnblogs.com/saving/p/11186460.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!