Comments (3)
如何判断滑动事件的触发 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.
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.
判断滑动方向
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
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
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.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from notebook.