禁止微信页面及iOS Safari拖动露底效果 (橡皮筋)

[zuopf769]

花式提升移动端交互体验

解决思路很明显：当容器可以滑动时，若已经在顶部，禁止下滑；若在底部，禁止上滑；容器无法滚动时，禁止上下滑。

基本实现方式是通过 document 上监听 touchstart 和 touchmove 事件，判断滑动方向；判断滑动事件的触发 target 祖先元素是否有可滑动元素，无则直接阻止冒泡。
若有这种祖先元素，判断其状态：offsetHeight >= scrollHeight 高度不够发生滚动，阻止冒泡；若可滚动 scrollTop === 0 即在顶部，阻止下滑的冒泡；若 scrollTop + offsetHeight >= scrollHeight 已经滑到底，阻止上滑的冒泡。

还需注意的是，要先判断滑动时 x 轴位移是否大于 y 轴 ，即是否是水平滑动，防止“误伤”一些水平滚动的元素。

[zuopf769]

如何判断滑动事件的触发 target 祖先元素是否有可滑动元素，无则直接阻止冒泡。

export default {
    // get nearest scroll element
    getScrollEventTarget (element, rootParent = window) {
        let node = element;
        if (node && node.tagName === 'HTML') {
            return rootParent;
        }
        // bugfix, see http://w3help.org/zh-cn/causes/SD9013
        // and http://stackoverflow.com/questions/17016740/onscroll-function-is-not-working-for-chrome
        while (node.tagName !== 'BODY'
            && node.nodeType === 1
            && node !== rootParent) {
            const {
                overflowY
            } = this.getComputedStyle(node);
            if (overflowY === 'scroll' || overflowY === 'auto') {
                return node;
            }
            node = node.parentNode;
        }
        return rootParent;
    },
    getScrollTop (element) {
        return 'scrollTop' in element ? element.scrollTop : element.pageYOffset;
    },
    // get distance from element top to page top
    getElementTop (element) {
        return (element === window ? 0 : element.getBoundingClientRect().top) + this.getScrollTop(window);
    },
    getVisibleHeight (element) {
        return element === window ? element.innerHeight : element.getBoundingClientRect().height;
    },

    getComputedStyle: document.defaultView.getComputedStyle.bind(document.defaultView)
};

 handleTouchMove (e) {
            this.touchMove(e);
            const el = scrollUtils.getScrollEventTarget(e.target, this.$el);
            const { scrollHeight, offsetHeight, scrollTop } = el;

            let canMove;
            if (this.deltaY > 0  && scrollTop <= 0) {
                canMove = false;
            } else if (this.deltaY <0 && scrollTop + offsetHeight >= scrollHeight) {
                canMove = false;
            } else {
                canMove = true;
            }
            if (!canMove) {
                e.preventDefault();
                e.stopPropagation();
            }

        }

[zuopf769]

const _ = require('src/util')
export default function (option) {
  var scrollSelector = option.scroll || '.scroller'
  var pos = {
    x: 0,
    y: 0
  }

  function stopEvent (e) {
    e.preventDefault()
    e.stopPropagation()
  }

  function recordPosition (e) {
    pos.x = e.touches[0].clientX
    pos.y = e.touches[0].clientY
  }

  function watchTouchMove (e) {
    var target = e.target
    var parents = _.parents(target, scrollSelector)
    var el = null
    if (target.classList.contains(scrollSelector)) el = target
    else if (parents.length) el = parents[0]
    else return stopEvent(e)
    var dx = e.touches[0].clientX - pos.x
    var dy = e.touches[0].clientY - pos.y
    var direction = dy > 0 ? '10' : '01'
    var scrollTop = el.scrollTop
    var scrollHeight = el.scrollHeight
    var offsetHeight = el.offsetHeight
    var isVertical = Math.abs(dx) < Math.abs(dy)
    var 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 stopEvent(e)
  }
  document.addEventListener('touchstart', recordPosition, false)
  document.addEventListener('touchmove', watchTouchMove, false)
}

[zuopf769]

判断滑动方向

const MIN_DISTANCE = 10;
function getDirection (x, y) {
    if (x > y && x > MIN_DISTANCE) {
        return 'horizontal';
    }
    if (y > x && y > MIN_DISTANCE) {
        return 'vertical';
    }
    return '';
}

export default {
    data () {
        return {
            direction: ''
        };
    },

    methods: {
        touchStart (event) {
            this.resetTouchStatus();
            this.startX = event.touches[0].clientX;
            this.startY = event.touches[0].clientY;
        },

        touchMove (event) {
            const touch = event.touches[0];
            this.deltaX = touch.clientX - this.startX;
            this.deltaY = touch.clientY - this.startY;
            this.offsetX = Math.abs(this.deltaX);
            this.offsetY = Math.abs(this.deltaY);
            this.direction = this.direction || getDirection(this.offsetX, this.offsetY);
        },

        resetTouchStatus () {
            this.direction = '';
            this.deltaX = 0;
            this.deltaY = 0;
            this.offsetX = 0;
            this.offsetY = 0;
        }
    }
};