微信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這個滾動區域內下拉不會出現。

且可用滾動這個區域


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM