zoukankan      html  css  js  c++  java
  • js禁止微信浏览器下拉显示黑底查看网址,不影响内部Scroll

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

    网上好多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();
            }
        };
  • 相关阅读:
    Android:TabHost导航栏
    java:StringUtil工具类
    Android进阶篇MediaPlayer
    Android:图片滚轮
    Android:EditText焦点触发布局隐藏以及显示
    Android:Spinner的使用
    ASP.NET编程模型的理解
    ASP.NET页面事件(页面生命周期)
    根据用户喜欢的爱好选择不同风格CSS(ViewState)
    ASP.NET的页面指令
  • 原文地址:https://www.cnblogs.com/jasonwang2y60/p/6848464.html
Copyright © 2011-2022 走看看