js禁止微信浏览器下拉显示黑底查看网址,不影响内部Scroll

摘要:
开发项目在微信浏览器上运行时经常遇到问题。当微信浏览器被下拉时,它自己的黑色背景(显示网站地址)会出现,如下图所示:互联网上许多js禁止内部滚动操作,导致页面无法滚动,上拉加载失败。例如,这个练习:$('body')。on('touchmove',函数(event){event.prpreventDefault();});ordocument.addEventListener('touch

开发项目跑在微信浏览器经常会遇到一个问题,微信浏览器下拉的时候会出现自带的黑色底色(显示网址)如下图:

js禁止微信浏览器下拉显示黑底查看网址,不影响内部Scroll第1张

网上好多js禁止操作的做法禁止了内部Scroll,导致页面不能滚动,上拉加载失效,例如这种做法:

$(‘body’).on(‘touchmove’, function (event) {event.preventDefault();});
or
document.addEventListener('touchmove', function(e){e.preventDefault()}, false);

查阅了资料然后进行了修改,于是得到以下解决方案,可以达到禁止微信黑底并且不影响上拉加载

// 首先禁止body
    document.body.ontouchmove = function (e) {
          e.preventDefault();
    };

// 然后取得触摸点的坐标
   var startX = 0, startY = 0;
    //touchstart事件
    function touchSatrtFunc(evt) {
        try
        {
            //evt.preventDefault(); //阻止触摸时浏览器的缩放、滚动条滚动等
            var touch = evt.touches[0]; //获取第一个触点
            var x = Number(touch.pageX); //页面触点X坐标
            var y = Number(touch.pageY); //页面触点Y坐标
            //记录触点初始位置
            startX = x;
            startY = y;

        } catch (e) {
            alert('touchSatrtFunc:' + e.message);
        }
    }
    document.addEventListener('touchstart', touchSatrtFunc, false);

// 然后对允许滚动的条件进行判断,这里讲滚动的元素指向body
  var _ss = document.body;
    _ss.ontouchmove = function (ev) {
        var _point = ev.touches[0],
                _top = _ss.scrollTop;
        // 什么时候到底部
        var _bottomFaVal = _ss.scrollHeight - _ss.offsetHeight;
        // 到达顶端
        if (_top === 0) {
            // 阻止向下滑动
            if (_point.clientY > startY) {
                ev.preventDefault();
            } else {
                // 阻止冒泡
                // 正常执行
                ev.stopPropagation();
            }
        } else if (_top === _bottomFaVal) {
            // 到达底部 如果想禁止页面滚动和上拉加载,讲这段注释放开,也就是在滚动到页面底部的制售阻止默认事件
            // 阻止向上滑动
            // if (_point.clientY < startY) {
            //     ev.preventDefault();
            // } else {
            //     // 阻止冒泡
            //     // 正常执行
            //     ev.stopPropagation();
            // }
        } else if (_top > 0 && _top < _bottomFaVal) {
            ev.stopPropagation();
        } else {
            ev.preventDefault();
        }
    };

免责声明:文章转载自《js禁止微信浏览器下拉显示黑底查看网址,不影响内部Scroll》仅用于学习参考。如对内容有疑问,请及时联系本站处理。

上篇记一次通过nginx反代网站请求总是超时的问题MacBookM1通过DockerDesk安装MySQL8容器下篇

宿迁高防,2C2G15M,22元/月;香港BGP,2C5G5M,25元/月 雨云优惠码:MjYwNzM=

相关文章

微信开放平台微信公众平台微信小程序openid合法性验证

我们获得了微信用户的openid,往往要把openid保存到服务器中的数据库里。有些场景需要检验openid的合法性,官方给了相应的验证接口如下: https://api.weixin.qq.com/sns/auth?access_token=ACCESS_TOKEN&openid=openid 填入正确的 ACCESS_TOKEN 和 open...

asp.net mvc让我告诉你请求从哪里来

移动互联网的兴起,导致越来越多的网站开始看中自己的mobile站点(m站),例如我们用手机浏览器访问58,美团等网站都会看到适配的m站点,随之而来响应式布局,h5等技术随之兴起,对于一些大型网站来说,可能会投入专门的人力来研发,对于一些小型网站,或者个人网站为了更好的浏览体验可能在你用移动设备访问时候给你转到一个H5适配页面,对网站进行一些介绍引导用户注册...

JS编码转换[转载]

//转化成十六进制, 调用的是vbscript的Hex函数 function Hex(n) {    c = n;  execScript("c = Hex(c)", "vbscript");  return c; } //返回文字的AscaII编码, 调用的是vbscript的Asc函数 function Asc(s) {  c = s;  exec...

js刷新页面方法 -- (转)

1,reload 方法,该方法强迫浏览器刷新当前页面。 语法:location.reload([bForceGet]) 参数: bForceGet, 可选参数, 默认为 false,从客户端缓存里取当前页。true, 则以 GET 方式,从服务端取最新的页面, 相当于客户端点击 F5("刷新") 2,replace 方法,该方法通过指定URL替换当前缓存在...

js 获取地址第1个斜杠后的内容或地址前一部分

var value = "https://www.baidu.com/20210922/95b22ab5034b2d0f.jpg";const str = value.split("https://"); //https://进行分割, const index = str[1].indexOf("/")+1; //indexOf 获取第一个斜杠的索引,co...

VUE JS 闹钟函数

心跳函数:秒表 setInterval() 方法可按照指定的周期(以毫秒计)来调用函数或计算表达式。 setInterval() 方法会不停地调用函数,直到clearInterval()被调用或窗口被关闭。 由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数。 clearInterval() 方法可取消由 s...