Giter VIP home page Giter VIP logo

Comments (3)

zuopf769 avatar zuopf769 commented on May 29, 2024

如何判断滑动事件的触发 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();
            }

        }

from notebook.

zuopf769 avatar zuopf769 commented on May 29, 2024
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)
}

from notebook.

zuopf769 avatar zuopf769 commented on May 29, 2024

判断滑动方向

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;
        }
    }
};

from notebook.

Related Issues (5)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.