首页 > 程序 > 禁止body滚动允许div滚动防微信露底

作者:ghostry 发布时间:2016-05-28 浏览: 2547

转载注明出处: https://blog.ghostry.cn/program/702.html

最近遇到一个需求,页面中只有一个div允许滚动,其他内容不允许滚动。

正常来讲加上

body{height:100%;overflow: hidden;}

应该就阻止页面滚动了。可是很悲催的是手机端并不能很好的执行,而且还有弹性效果。
所以只能对默认的滚动进行干涉。
首先禁止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);

然后对允许滚动的div进行判断

    var _ss = document.getElementById("div的id");
    _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();
        }
    };

这样处理完后,就只能指定的div滚动了。
变通一下,就可以实现微信防露底

标签: javascript 微信

上一篇: 20160509
下一篇: 小米5miui7稳定版深度精简列表解决耗电问题释放内存

已有 4 条评论 »

  1. 当滑动的起点为锚点时,会直接进入该链接,也就是说在起点处貌似有点击事件

  2. 求帮我改一下网址好吗,跪求大神 请你吃“糖”

  3. [...]转载出处: https://blog.ghostry.cn/program/702.html[...]

添加新评论 »

*
*

欢迎评论!歡迎評論!Comments welcome!komentoj bonvenaj!댓글 오신 것을 환영합니다!
:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: :cold: :cryy: :cute: :shy: :sleep: :struggle: :tea: :yahou: