forked from yejiaming/scroll
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathscroll.js
156 lines (155 loc) · 5.87 KB
/
scroll.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
/**
* Created by yejiaming on 2017/10/14.
* Scroll自定义滚动事件
*/
export function Scroll(el) {
var me = this;
me.init(el);
me.forbiddenScroll(me.getStyleTargetDom(me.$el, 'overflowY', ['scroll', 'auto']));
me.setMaxValue();
me.$el.addEventListener('touchstart', me.handleTouchStart.bind(me), false);
me.$el.addEventListener('touchmove', me.handleTouchMove.bind(me), false);
me.$el.addEventListener('touchend', me.handleTouchEnd.bind(me), false);
}
Scroll.prototype = {
// 初始化参数
init(el){
this.$el = el;
this.startTime = 0;
this.startY = 0;
this.oldY = null;
this.$event = new Event('y-scroll');
this.currentY = null;
this.distance = null;
this.deceleration = 0.0006;
this.minValue = 0;
this.resetY = null;
this.maxValue = null;
this.currentTime = null;
this.lastY = 0;
this.lastTime = 0;
},
// 禁用原生滚动
forbiddenScroll(scrollTarge){
var me = this;
// IE和webkit下鼠标滚动事件
scrollTarge.addEventListener('mousewheel', function (e) {
me.scrollFunc(e);
});
//火狐下的鼠标滚动事件
scrollTarge.addEventListener('DOMMouseScroll', function (e) {
me.scrollFunc(e);
});
document.documentElement.style['overflow'] = 'hidden'; // 禁用根节点(html)的滚动条
},
// 设置最大值
setMaxValue(){
var me = this;
var hiddenDom = me.getStyleTargetDom(me.$el, 'overflowY', 'hidden');
var hdHight = me.getPxValue(document.defaultView.getComputedStyle(hiddenDom)['height']);
var clientHeight = Math.abs(hdHight) < document.documentElement.clientHeight ? Math.abs(hdHight) : document.documentElement.clientHeight;
me.maxValue = me.$el.clientHeight - clientHeight;
},
// 获取想要的参数的目标节点,并指定属性以及属性值
getStyleTargetDom: function (element, attr, value) {
let currentNode = element;
while (currentNode && currentNode.tagName !== 'HTML' &&
currentNode.tagName !== 'BODY' && currentNode.nodeType === 1) {
let target = document.defaultView.getComputedStyle(currentNode)[attr];
if (value && value.indexOf(target) > -1) {
return currentNode;
}
currentNode = currentNode.parentNode;
}
return window;
},
// 阻止事件的冒泡
scrollFunc: function (e) {
e = e || window.event;
if (e && e.stopPropagation) {
// e.preventDefault();
e.stopPropagation();
} else {
e.returnvalue = false;
return false;
}
},
// 获取dom节点的TranslateY的值
getTranslateY(dom){
var transformString = dom.style.transform;
if (transformString) {
return this.getPxValue(transformString);
} else {
return 0;
}
},
// 获取100px中100的值
getPxValue(str){
return Number(String(str).match(/\+?\-?\d+/g)[0]);
},
handleTouchStart(event){
this.lastTime = this.startTime = new Date().getTime();
this.distance = 0;
this.resetY = this.startY = event.targetTouches[0].screenY;
/*每次移动开始时设置初始的oldY的值*/
this.oldY = this.getTranslateY(this.$el);
this.$el.style["transitionDuration"] = '0ms';
this.scrollFunc(event);
},
handleTouchMove(event){
event.preventDefault();
this.currentY = event.targetTouches[0].screenY;
this.currentTime = new Date().getTime();
// 二次及以上次数滚动(间歇性滚动)时间和路程重置计算,0.05是间歇性滚动的停顿位移和时间比
if (Math.abs(this.currentY - this.lastY) / Math.abs(this.currentTime - this.lastTime) < 0.05) {
this.startTime = new Date().getTime();
this.resetY = this.currentY;
}
this.distance = this.currentY - this.startY;
let temDis = this.distance + this.oldY;
/*设置移动最小值*/
temDis = temDis > this.minValue ? temDis * 1 / 3 : temDis;
/*设置移动最大值*/
temDis = temDis < -this.maxValue ? -this.maxValue + (temDis + this.maxValue) * 1 / 3 : temDis;
this.$el.style["-webkit-transform"] = 'translateY(' + temDis + 'px)';
this.lastY = this.currentY;
this.lastTime = this.currentTime;
this.$el.dispatchEvent(this.$event);
this.scrollFunc(event);
},
handleTouchEnd(event){
/*点透事件允许通过*/
if (!this.distance) {
return;
}
event.preventDefault();
let temDis = this.distance + this.oldY;
/*计算缓动值*/
var duration = new Date().getTime() - this.startTime;
// 300毫秒是判断间隔的最佳时间
var resetDistance = this.currentY - this.resetY;
if (duration < 300 && Math.abs(resetDistance) > 10) {
var speed = Math.abs(resetDistance) / duration,
destination;
// 初速度为0 距离等于速度的平方除以2倍加速度
destination = (speed * speed) / (2 * this.deceleration) * (resetDistance < 0 ? -1 : 1);
temDis += destination;
}
/*设置最小值*/
if (temDis > this.minValue) {
temDis = this.minValue;
}
/*设置最大值*/
if (temDis < -this.maxValue) {
temDis = -this.maxValue;
}
this.$el.style["transitionDuration"] = '1000ms';
this.$el.style["transitionTimingFunction"] = 'ease-out';
/*确定最终的滚动位置*/
setTimeout(()=> {
this.$el.style["-webkit-transform"] = 'translateY(' + temDis + 'px)';
}, 0);
this.$el.dispatchEvent(this.$event);
this.scrollFunc(event);
}
};