zoukankan      html  css  js  c++  java
  • 微信H5禁止下拉 且可下滚动指定区域

     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这个滚动区域内下拉不会出现。

    且可用滚动这个区域

  • 相关阅读:
    百度百科目录导航树小插件
    Docker for windows部署mysql挂载数据卷
    ASP.NET CORE 2.0 不小心踩得坑
    获取MVC中Controller下的Action参数异常
    DataTableToList
    svn禁止提交的文件
    plush
    解决端口号被占用的问题
    vue-router
    vue-layer
  • 原文地址:https://www.cnblogs.com/saving/p/11186460.html
Copyright © 2011-2022 走看看