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
|
const SCROLL_DELTA_X = 48;
const SCROLL_DELTA_Y = 48;
const isVisible = (win, element) => {
let rect = element.getBoundingClientRect();
if (rect.width === 0 || rect.height === 0) {
return false;
}
if (rect.right < 0 && rect.bottom < 0) {
return false;
}
if (win.innerWidth < rect.left && win.innerHeight < rect.top) {
return false;
}
let { display, visibility } = win.getComputedStyle(element);
if (display === 'none' || visibility === 'hidden') {
return false;
}
return true;
};
const isScrollable = (win, element) => {
let { overflowX, overflowY } = win.getComputedStyle(element);
if (element.tagName !== 'HTML' &&
overflowX !== 'scroll' && overflowX !== 'auto' &&
overflowY !== 'scroll' && overflowY !== 'auto') {
return false;
}
return element.scrollWidth > element.clientWidth ||
element.scrollHeight > element.clientHeight;
};
// Find a visiable and scrollable element by depth-first search. Currently
// this method is called by each scrolling, and the returned value of this
// method is not cached. That does not cause performance issue because in the
// most pages, the window is root element i,e, documentElement.
const findScrollable = (win, element) => {
if (isScrollable(win, element)) {
return element;
}
let children = Array.prototype
.filter.call(element.children, e => isVisible(win, e));
for (let child of children) {
let scrollable = findScrollable(win, child);
if (scrollable) {
return scrollable;
}
}
return null;
};
const scrollTarget = (win) => {
let target = findScrollable(win, win.document.documentElement);
if (target) {
return target;
}
return win.document.documentElement;
};
const scrollVertically = (win, count) => {
let target = scrollTarget(win);
let x = target.scrollLeft;
let y = target.scrollTop + SCROLL_DELTA_Y * count;
target.scrollTo(x, y);
};
const scrollHorizonally = (win, count) => {
let target = scrollTarget(win);
let x = target.scrollLeft + SCROLL_DELTA_X * count;
let y = target.scrollTop;
target.scrollTo(x, y);
};
const scrollPages = (win, count) => {
let target = scrollTarget(win);
let height = target.clientHeight;
let x = target.scrollLeft;
let y = target.scrollTop + height * count;
target.scrollTo(x, y);
};
const scrollTop = (win) => {
let target = scrollTarget(win);
let x = target.scrollLeft;
let y = 0;
target.scrollTo(x, y);
};
const scrollBottom = (win) => {
let target = scrollTarget(win);
let x = target.scrollLeft;
let y = target.scrollHeight;
target.scrollTo(x, y);
};
const scrollHome = (win) => {
let target = scrollTarget(win);
let x = 0;
let y = target.scrollLeft;
target.scrollTo(x, y);
};
const scrollEnd = (win) => {
let target = scrollTarget(win);
let x = target.scrollWidth;
let y = target.scrollLeft;
target.scrollTo(x, y);
};
export {
scrollVertically, scrollHorizonally, scrollPages,
scrollTop, scrollBottom, scrollHome, scrollEnd
};
|
