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

阳光穿透心脏的1/2处 2021-10-18 11:18 224阅读 0赞

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

且可用滚动这个区域

转载于:https://www.cnblogs.com/saving/p/11186460.html

发表评论取消回复

表情：

评论列表（有 0 条评论，224人围观）

还没有评论，来说两句吧...

相关阅读

相关微信小程序（4）：可滚动视图区域组件

文章目录 scroll-view 可滚动视图区域 1、scroll-y：允许纵向滚动 2、sc

约定不等于承诺〃/ 2022年12月30日 13:59/ 0 赞/ 449 阅读

相关 CSS - H5 页面禁止页面上拉下拉及滚动

前言开发 `H5` 页面时，我们需要将页面固定住禁止上拉下拉及滚动，网上很多方法，多数是 `JS` 来判断滚动条来实现。实现我推荐使用 `CSS` 实现，几

╰半夏微凉°/ 2022年10月25日 14:28/ 0 赞/ 317 阅读

相关禁止当前html页面下拉刷新,移动端禁止页面下拉刷新（页面有滚动区域）

function isscroll(dom,flag) \{ // 页面是否启用不可下拉 if(flag) \{ document.body.addEventListen

向右看齐/ 2022年10月06日 01:00/ 0 赞/ 6 阅读

相关禁用微信浏览器的下拉_解决微信浏览器禁止下拉查看真实域名网址的问题

一、原理监听body的touchmove 事件，取消默认操作，则就不会触发页面的下拉。二、代码 <!DOCTYPE html> <html lang=

秒速五厘米/ 2022年09月09日 06:15/ 0 赞/ 142 阅读

相关 H5在微信公众号的下拉刷新实现

转载自：[http://blog.csdn.net/zl544434558/article/details/50401832][http_blog.csdn.net_zl544

红太狼/ 2022年07月15日 08:56/ 0 赞/ 165 阅读

相关 h5下拉

数据列表 <input type="text" list="mydata" placeholder="热门英雄排行" /> <datalist id="m

以你之姓@/ 2022年06月05日 01:38/ 0 赞/ 174 阅读

相关 js禁止微信浏览器下拉显示黑底查看网址

// 首先禁止body document.body.ontouchmove = function (e) { e.preve

青旅半醒/ 2022年03月31日 05:15/ 0 赞/ 144 阅读

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

var app = document.getElementsByClassName("tree-hole-room-messages")[0]; var

阳光穿透心脏的1/2处/ 2021年10月18日 11:18/ 0 赞/ 225 阅读

相关微信小程序禁止ios页面下拉下滑滚动出现空白的情况

项目需要做了一个图片拖动指定组件上删除，和排序的功能android测试正常， ios会出现拖动图片页面也跟着下滑的尴尬情况。查文档下拉刷新配置默认是关闭的，后经查

刺骨的言语ヽ痛彻心扉/ 2021年09月17日 10:02/ 0 赞/ 878 阅读

相关微信小程序上拉加载更多，下拉刷新，禁止下拉刷新

一. 1.在app.josn中配置 "enablePullDownRefresh": true, ![20200513174051415.png][] 2. /

Myth丶恋晨/ 2021年07月24日 19:21/ 0 赞/ 1400 阅读