zoukankan      html  css  js  c++  java
  • 移动端优化(滚动穿透)

     var stopScrollThrough = {
            pos: {
                x: 0,
                y: 0
            },
            stopEvent: function (e) {
                e.preventDefault()
                e.stopPropagation()
            },
            startPosition: function (e) {
                stopScrollThrough.pos.x = e.touches[0].clientX;
                stopScrollThrough.pos.y = e.touches[0].clientY;
            },
            watchTouchMove: function (e) {
                var target = e.target,
                    parents = $(target).parents('.mobileScrollBox'),
                    el = null;
                if (target.classList.contains('.mobileScrollBox')) {
                    el = target;
                } else if (parents.length) {
                    el = parents[0];
                } else {
                    return stopScrollThrough.stopEvent(e);
                }
                var dx = e.touches[0].clientX - stopScrollThrough.pos.x,
                    dy = e.touches[0].clientY - stopScrollThrough.pos.y,
                    direction = dy > 0 ? '10' : '01',
                    scrollTop = el.scrollTop,
                    scrollHeight = el.scrollHeight,
                    offsetHeight = el.offsetHeight,
                    isVertical = Math.abs(dx) < Math.abs(dy),
                    status = '11';
                if (scrollTop == 0) {
                    status = offsetHeight >= scrollHeight ? '00' : '01'
                } else if (scrollTop + offsetHeight >= scrollHeight) {
                    status = '10'
                }
                if (status !== '11' && isVertical && !(parseInt(status, 2) & parseInt(direction, 2))) {
                    return stopScrollThrough.stopEvent(e);
                }
            },
            startStopScroll: function (e) {
                document.addEventListener('touchstart', stopScrollThrough.startPosition, { passive: false });
                document.addEventListener('touchmove', stopScrollThrough.watchTouchMove, { passive: false });
            },
            removeStopScroll: function (e) {
                document.removeEventListener('touchstart', stopScrollThrough.startPosition, { passive: false });
                document.removeEventListener('touchmove', stopScrollThrough.watchTouchMove, { passive: false });
            }
        }
  • 相关阅读:
    使用POI操作Excel时对事先写入模板的公式强制执行
    centos7下python3和pycharm安装
    IntelliJ IDEA 快捷键终极大全
    netcore XmlDocument 使用Load和Save方法
    Add File as a Link on Visual Studio
    C#开源项目
    Shell bash和sh区别
    SecureCRT中Vim颜色
    查找局域网中未知设备的IP
    代码分支管理
  • 原文地址:https://www.cnblogs.com/wjyz/p/12883699.html
Copyright © 2011-2022 走看看