compute-scroll-into-view 1.0.10 → 1.0.14
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +5 -3
- package/es/index.js +37 -15
- package/index.js +39 -17
- package/package.json +32 -31
- package/umd/compute-scroll-into-view.js +38 -16
- package/umd/compute-scroll-into-view.min.js +1 -1
package/README.md
CHANGED
|
@@ -47,7 +47,11 @@ const actions = computeScrollIntoView(node, {
|
|
|
47
47
|
|
|
48
48
|
// same behavior as Element.scrollIntoViewIfNeeded(true)
|
|
49
49
|
// see: https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoViewIfNeeded
|
|
50
|
-
const actions = computeScrollIntoView(node, {
|
|
50
|
+
const actions = computeScrollIntoView(node, {
|
|
51
|
+
scrollMode: 'if-needed',
|
|
52
|
+
block: 'center',
|
|
53
|
+
inline: 'center',
|
|
54
|
+
})
|
|
51
55
|
|
|
52
56
|
// Then perform the scrolling, use scroll-into-view-if-needed if you don't want to implement this part
|
|
53
57
|
actions.forEach(({ el, top, left }) => {
|
|
@@ -124,8 +128,6 @@ This package follows the convention [adopted by Firefox](https://hg.mozilla.org/
|
|
|
124
128
|
|
|
125
129
|
This library ships with library definitions for TypeScript.
|
|
126
130
|
|
|
127
|
-
> FlowType definitions is coming soon...
|
|
128
|
-
|
|
129
131
|
[gzip-badge]: http://img.badgesize.io/https://unpkg.com/compute-scroll-into-view/umd/compute-scroll-into-view.min.js?compression=gzip&label=gzip%20size&style=flat-square
|
|
130
132
|
[size-badge]: http://img.badgesize.io/https://unpkg.com/compute-scroll-into-view/umd/compute-scroll-into-view.min.js?label=size&style=flat-square
|
|
131
133
|
[unpkg-dist]: https://unpkg.com/compute-scroll-into-view/umd/
|
package/es/index.js
CHANGED
|
@@ -10,10 +10,32 @@ function canOverflow(overflow, skipOverflowHiddenElements) {
|
|
|
10
10
|
return overflow !== 'visible' && overflow !== 'clip';
|
|
11
11
|
}
|
|
12
12
|
|
|
13
|
+
function getFrameElement(el) {
|
|
14
|
+
if (!el.ownerDocument || !el.ownerDocument.defaultView) {
|
|
15
|
+
return null;
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
try {
|
|
19
|
+
return el.ownerDocument.defaultView.frameElement;
|
|
20
|
+
} catch (e) {
|
|
21
|
+
return null;
|
|
22
|
+
}
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
function isHiddenByFrame(el) {
|
|
26
|
+
var frame = getFrameElement(el);
|
|
27
|
+
|
|
28
|
+
if (!frame) {
|
|
29
|
+
return false;
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
return frame.clientHeight < el.scrollHeight || frame.clientWidth < el.scrollWidth;
|
|
33
|
+
}
|
|
34
|
+
|
|
13
35
|
function isScrollable(el, skipOverflowHiddenElements) {
|
|
14
36
|
if (el.clientHeight < el.scrollHeight || el.clientWidth < el.scrollWidth) {
|
|
15
37
|
var style = getComputedStyle(el, null);
|
|
16
|
-
return canOverflow(style.overflowY, skipOverflowHiddenElements) || canOverflow(style.overflowX, skipOverflowHiddenElements);
|
|
38
|
+
return canOverflow(style.overflowY, skipOverflowHiddenElements) || canOverflow(style.overflowX, skipOverflowHiddenElements) || isHiddenByFrame(el);
|
|
17
39
|
}
|
|
18
40
|
|
|
19
41
|
return false;
|
|
@@ -24,7 +46,7 @@ function alignNearest(scrollingEdgeStart, scrollingEdgeEnd, scrollingSize, scrol
|
|
|
24
46
|
return 0;
|
|
25
47
|
}
|
|
26
48
|
|
|
27
|
-
if (elementEdgeStart
|
|
49
|
+
if (elementEdgeStart <= scrollingEdgeStart && elementSize <= scrollingSize || elementEdgeEnd >= scrollingEdgeEnd && elementSize >= scrollingSize) {
|
|
28
50
|
return elementEdgeStart - scrollingEdgeStart - scrollingBorderStart;
|
|
29
51
|
}
|
|
30
52
|
|
|
@@ -91,14 +113,14 @@ export default (function (target, options) {
|
|
|
91
113
|
var frame = frames[index];
|
|
92
114
|
|
|
93
115
|
var _frame$getBoundingCli = frame.getBoundingClientRect(),
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
116
|
+
height = _frame$getBoundingCli.height,
|
|
117
|
+
width = _frame$getBoundingCli.width,
|
|
118
|
+
top = _frame$getBoundingCli.top,
|
|
97
119
|
right = _frame$getBoundingCli.right,
|
|
98
120
|
bottom = _frame$getBoundingCli.bottom,
|
|
99
|
-
|
|
121
|
+
left = _frame$getBoundingCli.left;
|
|
100
122
|
|
|
101
|
-
if (scrollMode === 'if-needed' && targetTop >= 0 && targetLeft >= 0 && targetBottom <= viewportHeight && targetRight <= viewportWidth && targetTop >=
|
|
123
|
+
if (scrollMode === 'if-needed' && targetTop >= 0 && targetLeft >= 0 && targetBottom <= viewportHeight && targetRight <= viewportWidth && targetTop >= top && targetBottom <= bottom && targetLeft >= left && targetRight <= right) {
|
|
102
124
|
return computations;
|
|
103
125
|
}
|
|
104
126
|
|
|
@@ -137,29 +159,29 @@ export default (function (target, options) {
|
|
|
137
159
|
inlineScroll = Math.max(0, inlineScroll + viewportX);
|
|
138
160
|
} else {
|
|
139
161
|
if (block === 'start') {
|
|
140
|
-
blockScroll = targetBlock -
|
|
162
|
+
blockScroll = targetBlock - top - borderTop;
|
|
141
163
|
} else if (block === 'end') {
|
|
142
164
|
blockScroll = targetBlock - bottom + borderBottom + scrollbarHeight;
|
|
143
165
|
} else if (block === 'nearest') {
|
|
144
|
-
blockScroll = alignNearest(
|
|
166
|
+
blockScroll = alignNearest(top, bottom, height, borderTop, borderBottom + scrollbarHeight, targetBlock, targetBlock + targetHeight, targetHeight);
|
|
145
167
|
} else {
|
|
146
|
-
blockScroll = targetBlock - (
|
|
168
|
+
blockScroll = targetBlock - (top + height / 2) + scrollbarHeight / 2;
|
|
147
169
|
}
|
|
148
170
|
|
|
149
171
|
if (inline === 'start') {
|
|
150
|
-
inlineScroll = targetInline -
|
|
172
|
+
inlineScroll = targetInline - left - borderLeft;
|
|
151
173
|
} else if (inline === 'center') {
|
|
152
|
-
inlineScroll = targetInline - (
|
|
174
|
+
inlineScroll = targetInline - (left + width / 2) + scrollbarWidth / 2;
|
|
153
175
|
} else if (inline === 'end') {
|
|
154
176
|
inlineScroll = targetInline - right + borderRight + scrollbarWidth;
|
|
155
177
|
} else {
|
|
156
|
-
inlineScroll = alignNearest(
|
|
178
|
+
inlineScroll = alignNearest(left, right, width, borderLeft, borderRight + scrollbarWidth, targetInline, targetInline + targetWidth, targetWidth);
|
|
157
179
|
}
|
|
158
180
|
|
|
159
181
|
var scrollLeft = frame.scrollLeft,
|
|
160
182
|
scrollTop = frame.scrollTop;
|
|
161
|
-
blockScroll = Math.max(0, Math.min(scrollTop + blockScroll, frame.scrollHeight -
|
|
162
|
-
inlineScroll = Math.max(0, Math.min(scrollLeft + inlineScroll, frame.scrollWidth -
|
|
183
|
+
blockScroll = Math.max(0, Math.min(scrollTop + blockScroll, frame.scrollHeight - height + scrollbarHeight));
|
|
184
|
+
inlineScroll = Math.max(0, Math.min(scrollLeft + inlineScroll, frame.scrollWidth - width + scrollbarWidth));
|
|
163
185
|
targetBlock += scrollTop - blockScroll;
|
|
164
186
|
targetInline += scrollLeft - inlineScroll;
|
|
165
187
|
}
|
package/index.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
3
|
exports.__esModule = true;
|
|
4
|
-
exports
|
|
4
|
+
exports["default"] = void 0;
|
|
5
5
|
|
|
6
6
|
function isElement(el) {
|
|
7
7
|
return el != null && typeof el === 'object' && el.nodeType === 1;
|
|
@@ -15,10 +15,32 @@ function canOverflow(overflow, skipOverflowHiddenElements) {
|
|
|
15
15
|
return overflow !== 'visible' && overflow !== 'clip';
|
|
16
16
|
}
|
|
17
17
|
|
|
18
|
+
function getFrameElement(el) {
|
|
19
|
+
if (!el.ownerDocument || !el.ownerDocument.defaultView) {
|
|
20
|
+
return null;
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
try {
|
|
24
|
+
return el.ownerDocument.defaultView.frameElement;
|
|
25
|
+
} catch (e) {
|
|
26
|
+
return null;
|
|
27
|
+
}
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
function isHiddenByFrame(el) {
|
|
31
|
+
var frame = getFrameElement(el);
|
|
32
|
+
|
|
33
|
+
if (!frame) {
|
|
34
|
+
return false;
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
return frame.clientHeight < el.scrollHeight || frame.clientWidth < el.scrollWidth;
|
|
38
|
+
}
|
|
39
|
+
|
|
18
40
|
function isScrollable(el, skipOverflowHiddenElements) {
|
|
19
41
|
if (el.clientHeight < el.scrollHeight || el.clientWidth < el.scrollWidth) {
|
|
20
42
|
var style = getComputedStyle(el, null);
|
|
21
|
-
return canOverflow(style.overflowY, skipOverflowHiddenElements) || canOverflow(style.overflowX, skipOverflowHiddenElements);
|
|
43
|
+
return canOverflow(style.overflowY, skipOverflowHiddenElements) || canOverflow(style.overflowX, skipOverflowHiddenElements) || isHiddenByFrame(el);
|
|
22
44
|
}
|
|
23
45
|
|
|
24
46
|
return false;
|
|
@@ -29,7 +51,7 @@ function alignNearest(scrollingEdgeStart, scrollingEdgeEnd, scrollingSize, scrol
|
|
|
29
51
|
return 0;
|
|
30
52
|
}
|
|
31
53
|
|
|
32
|
-
if (elementEdgeStart
|
|
54
|
+
if (elementEdgeStart <= scrollingEdgeStart && elementSize <= scrollingSize || elementEdgeEnd >= scrollingEdgeEnd && elementSize >= scrollingSize) {
|
|
33
55
|
return elementEdgeStart - scrollingEdgeStart - scrollingBorderStart;
|
|
34
56
|
}
|
|
35
57
|
|
|
@@ -96,14 +118,14 @@ var _default = function _default(target, options) {
|
|
|
96
118
|
var frame = frames[index];
|
|
97
119
|
|
|
98
120
|
var _frame$getBoundingCli = frame.getBoundingClientRect(),
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
121
|
+
height = _frame$getBoundingCli.height,
|
|
122
|
+
width = _frame$getBoundingCli.width,
|
|
123
|
+
top = _frame$getBoundingCli.top,
|
|
102
124
|
right = _frame$getBoundingCli.right,
|
|
103
125
|
bottom = _frame$getBoundingCli.bottom,
|
|
104
|
-
|
|
126
|
+
left = _frame$getBoundingCli.left;
|
|
105
127
|
|
|
106
|
-
if (scrollMode === 'if-needed' && targetTop >= 0 && targetLeft >= 0 && targetBottom <= viewportHeight && targetRight <= viewportWidth && targetTop >=
|
|
128
|
+
if (scrollMode === 'if-needed' && targetTop >= 0 && targetLeft >= 0 && targetBottom <= viewportHeight && targetRight <= viewportWidth && targetTop >= top && targetBottom <= bottom && targetLeft >= left && targetRight <= right) {
|
|
107
129
|
return computations;
|
|
108
130
|
}
|
|
109
131
|
|
|
@@ -142,29 +164,29 @@ var _default = function _default(target, options) {
|
|
|
142
164
|
inlineScroll = Math.max(0, inlineScroll + viewportX);
|
|
143
165
|
} else {
|
|
144
166
|
if (block === 'start') {
|
|
145
|
-
blockScroll = targetBlock -
|
|
167
|
+
blockScroll = targetBlock - top - borderTop;
|
|
146
168
|
} else if (block === 'end') {
|
|
147
169
|
blockScroll = targetBlock - bottom + borderBottom + scrollbarHeight;
|
|
148
170
|
} else if (block === 'nearest') {
|
|
149
|
-
blockScroll = alignNearest(
|
|
171
|
+
blockScroll = alignNearest(top, bottom, height, borderTop, borderBottom + scrollbarHeight, targetBlock, targetBlock + targetHeight, targetHeight);
|
|
150
172
|
} else {
|
|
151
|
-
blockScroll = targetBlock - (
|
|
173
|
+
blockScroll = targetBlock - (top + height / 2) + scrollbarHeight / 2;
|
|
152
174
|
}
|
|
153
175
|
|
|
154
176
|
if (inline === 'start') {
|
|
155
|
-
inlineScroll = targetInline -
|
|
177
|
+
inlineScroll = targetInline - left - borderLeft;
|
|
156
178
|
} else if (inline === 'center') {
|
|
157
|
-
inlineScroll = targetInline - (
|
|
179
|
+
inlineScroll = targetInline - (left + width / 2) + scrollbarWidth / 2;
|
|
158
180
|
} else if (inline === 'end') {
|
|
159
181
|
inlineScroll = targetInline - right + borderRight + scrollbarWidth;
|
|
160
182
|
} else {
|
|
161
|
-
inlineScroll = alignNearest(
|
|
183
|
+
inlineScroll = alignNearest(left, right, width, borderLeft, borderRight + scrollbarWidth, targetInline, targetInline + targetWidth, targetWidth);
|
|
162
184
|
}
|
|
163
185
|
|
|
164
186
|
var scrollLeft = frame.scrollLeft,
|
|
165
187
|
scrollTop = frame.scrollTop;
|
|
166
|
-
blockScroll = Math.max(0, Math.min(scrollTop + blockScroll, frame.scrollHeight -
|
|
167
|
-
inlineScroll = Math.max(0, Math.min(scrollLeft + inlineScroll, frame.scrollWidth -
|
|
188
|
+
blockScroll = Math.max(0, Math.min(scrollTop + blockScroll, frame.scrollHeight - height + scrollbarHeight));
|
|
189
|
+
inlineScroll = Math.max(0, Math.min(scrollLeft + inlineScroll, frame.scrollWidth - width + scrollbarWidth));
|
|
168
190
|
targetBlock += scrollTop - blockScroll;
|
|
169
191
|
targetInline += scrollLeft - inlineScroll;
|
|
170
192
|
}
|
|
@@ -179,5 +201,5 @@ var _default = function _default(target, options) {
|
|
|
179
201
|
return computations;
|
|
180
202
|
};
|
|
181
203
|
|
|
182
|
-
exports
|
|
204
|
+
exports["default"] = _default;
|
|
183
205
|
module.exports = exports.default;
|
package/package.json
CHANGED
|
@@ -8,7 +8,7 @@
|
|
|
8
8
|
"type": "git",
|
|
9
9
|
"url": "git+https://github.com/stipsan/compute-scroll-into-view.git"
|
|
10
10
|
},
|
|
11
|
-
"version": "1.0.
|
|
11
|
+
"version": "1.0.14",
|
|
12
12
|
"main": "index.js",
|
|
13
13
|
"module": "es/index.js",
|
|
14
14
|
"files": [
|
|
@@ -31,35 +31,37 @@
|
|
|
31
31
|
"test": "jest -c integration/jest.config.js",
|
|
32
32
|
"typecheck": "tsc --noEmit"
|
|
33
33
|
},
|
|
34
|
+
"sideEffects": false,
|
|
35
|
+
"typings": "typings/index.d.ts",
|
|
34
36
|
"devDependencies": {
|
|
35
|
-
"@babel/cli": "7.
|
|
36
|
-
"@babel/core": "7.
|
|
37
|
-
"@babel/plugin-external-helpers": "7.
|
|
38
|
-
"@babel/preset-env": "7.
|
|
39
|
-
"@babel/preset-typescript": "7.
|
|
40
|
-
"babel-plugin-add-module-exports": "1.0.
|
|
41
|
-
"babel-plugin-dev-expression": "0.2.
|
|
42
|
-
"concurrently": "
|
|
43
|
-
"husky": "
|
|
37
|
+
"@babel/cli": "7.8.4",
|
|
38
|
+
"@babel/core": "7.9.6",
|
|
39
|
+
"@babel/plugin-external-helpers": "7.8.3",
|
|
40
|
+
"@babel/preset-env": "7.9.6",
|
|
41
|
+
"@babel/preset-typescript": "7.9.0",
|
|
42
|
+
"babel-plugin-add-module-exports": "1.0.2",
|
|
43
|
+
"babel-plugin-dev-expression": "0.2.2",
|
|
44
|
+
"concurrently": "5.2.0",
|
|
45
|
+
"husky": "3.1.0",
|
|
44
46
|
"jest": "23.6.0",
|
|
45
|
-
"jest-junit": "
|
|
46
|
-
"jest-puppeteer": "
|
|
47
|
-
"lint-staged": "
|
|
48
|
-
"prettier": "1.
|
|
49
|
-
"prettier-package-json": "2.
|
|
50
|
-
"puppeteer": "1.
|
|
51
|
-
"rimraf": "
|
|
52
|
-
"rollup": "
|
|
53
|
-
"rollup-plugin-babel": "4.0
|
|
54
|
-
"rollup-plugin-commonjs": "
|
|
55
|
-
"rollup-plugin-node-resolve": "
|
|
56
|
-
"rollup-plugin-replace": "2.
|
|
57
|
-
"rollup-plugin-terser": "3.0
|
|
58
|
-
"semantic-release": "15.
|
|
59
|
-
"serve": "
|
|
60
|
-
"tslint": "5.
|
|
61
|
-
"tslint-config-prettier": "1.
|
|
62
|
-
"typescript": "3.
|
|
47
|
+
"jest-junit": "10.0.0",
|
|
48
|
+
"jest-puppeteer": "4.4.0",
|
|
49
|
+
"lint-staged": "10.1.5",
|
|
50
|
+
"prettier": "1.19.1",
|
|
51
|
+
"prettier-package-json": "2.1.3",
|
|
52
|
+
"puppeteer": "2.1.1",
|
|
53
|
+
"rimraf": "3.0.2",
|
|
54
|
+
"rollup": "1.29.0",
|
|
55
|
+
"rollup-plugin-babel": "4.4.0",
|
|
56
|
+
"rollup-plugin-commonjs": "10.1.0",
|
|
57
|
+
"rollup-plugin-node-resolve": "5.2.0",
|
|
58
|
+
"rollup-plugin-replace": "2.2.0",
|
|
59
|
+
"rollup-plugin-terser": "5.3.0",
|
|
60
|
+
"semantic-release": "15.14.0",
|
|
61
|
+
"serve": "11.3.1",
|
|
62
|
+
"tslint": "5.20.1",
|
|
63
|
+
"tslint-config-prettier": "1.18.0",
|
|
64
|
+
"typescript": "3.9.3"
|
|
63
65
|
},
|
|
64
66
|
"keywords": [
|
|
65
67
|
"if-needed",
|
|
@@ -79,7 +81,7 @@
|
|
|
79
81
|
"bundlesize": [
|
|
80
82
|
{
|
|
81
83
|
"path": "./umd/compute-scroll-into-view.min.js",
|
|
82
|
-
"maxSize": "2.
|
|
84
|
+
"maxSize": "2.6 kB",
|
|
83
85
|
"compression": "none"
|
|
84
86
|
}
|
|
85
87
|
],
|
|
@@ -118,6 +120,5 @@
|
|
|
118
120
|
"prepare": [
|
|
119
121
|
"@semantic-release/npm"
|
|
120
122
|
]
|
|
121
|
-
}
|
|
122
|
-
"typings": "typings/index.d.ts"
|
|
123
|
+
}
|
|
123
124
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
(function (global, factory) {
|
|
2
2
|
typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
|
|
3
3
|
typeof define === 'function' && define.amd ? define(factory) :
|
|
4
|
-
(global.computeScrollIntoView = factory());
|
|
4
|
+
(global = global || self, global.computeScrollIntoView = factory());
|
|
5
5
|
}(this, (function () { 'use strict';
|
|
6
6
|
|
|
7
7
|
function isElement(el) {
|
|
@@ -16,10 +16,32 @@
|
|
|
16
16
|
return overflow !== 'visible' && overflow !== 'clip';
|
|
17
17
|
}
|
|
18
18
|
|
|
19
|
+
function getFrameElement(el) {
|
|
20
|
+
if (!el.ownerDocument || !el.ownerDocument.defaultView) {
|
|
21
|
+
return null;
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
try {
|
|
25
|
+
return el.ownerDocument.defaultView.frameElement;
|
|
26
|
+
} catch (e) {
|
|
27
|
+
return null;
|
|
28
|
+
}
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
function isHiddenByFrame(el) {
|
|
32
|
+
var frame = getFrameElement(el);
|
|
33
|
+
|
|
34
|
+
if (!frame) {
|
|
35
|
+
return false;
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
return frame.clientHeight < el.scrollHeight || frame.clientWidth < el.scrollWidth;
|
|
39
|
+
}
|
|
40
|
+
|
|
19
41
|
function isScrollable(el, skipOverflowHiddenElements) {
|
|
20
42
|
if (el.clientHeight < el.scrollHeight || el.clientWidth < el.scrollWidth) {
|
|
21
43
|
var style = getComputedStyle(el, null);
|
|
22
|
-
return canOverflow(style.overflowY, skipOverflowHiddenElements) || canOverflow(style.overflowX, skipOverflowHiddenElements);
|
|
44
|
+
return canOverflow(style.overflowY, skipOverflowHiddenElements) || canOverflow(style.overflowX, skipOverflowHiddenElements) || isHiddenByFrame(el);
|
|
23
45
|
}
|
|
24
46
|
|
|
25
47
|
return false;
|
|
@@ -30,7 +52,7 @@
|
|
|
30
52
|
return 0;
|
|
31
53
|
}
|
|
32
54
|
|
|
33
|
-
if (elementEdgeStart
|
|
55
|
+
if (elementEdgeStart <= scrollingEdgeStart && elementSize <= scrollingSize || elementEdgeEnd >= scrollingEdgeEnd && elementSize >= scrollingSize) {
|
|
34
56
|
return elementEdgeStart - scrollingEdgeStart - scrollingBorderStart;
|
|
35
57
|
}
|
|
36
58
|
|
|
@@ -97,14 +119,14 @@
|
|
|
97
119
|
var frame = frames[index];
|
|
98
120
|
|
|
99
121
|
var _frame$getBoundingCli = frame.getBoundingClientRect(),
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
122
|
+
height = _frame$getBoundingCli.height,
|
|
123
|
+
width = _frame$getBoundingCli.width,
|
|
124
|
+
top = _frame$getBoundingCli.top,
|
|
103
125
|
right = _frame$getBoundingCli.right,
|
|
104
126
|
bottom = _frame$getBoundingCli.bottom,
|
|
105
|
-
|
|
127
|
+
left = _frame$getBoundingCli.left;
|
|
106
128
|
|
|
107
|
-
if (scrollMode === 'if-needed' && targetTop >= 0 && targetLeft >= 0 && targetBottom <= viewportHeight && targetRight <= viewportWidth && targetTop >=
|
|
129
|
+
if (scrollMode === 'if-needed' && targetTop >= 0 && targetLeft >= 0 && targetBottom <= viewportHeight && targetRight <= viewportWidth && targetTop >= top && targetBottom <= bottom && targetLeft >= left && targetRight <= right) {
|
|
108
130
|
return computations;
|
|
109
131
|
}
|
|
110
132
|
|
|
@@ -143,29 +165,29 @@
|
|
|
143
165
|
inlineScroll = Math.max(0, inlineScroll + viewportX);
|
|
144
166
|
} else {
|
|
145
167
|
if (block === 'start') {
|
|
146
|
-
blockScroll = targetBlock -
|
|
168
|
+
blockScroll = targetBlock - top - borderTop;
|
|
147
169
|
} else if (block === 'end') {
|
|
148
170
|
blockScroll = targetBlock - bottom + borderBottom + scrollbarHeight;
|
|
149
171
|
} else if (block === 'nearest') {
|
|
150
|
-
blockScroll = alignNearest(
|
|
172
|
+
blockScroll = alignNearest(top, bottom, height, borderTop, borderBottom + scrollbarHeight, targetBlock, targetBlock + targetHeight, targetHeight);
|
|
151
173
|
} else {
|
|
152
|
-
blockScroll = targetBlock - (
|
|
174
|
+
blockScroll = targetBlock - (top + height / 2) + scrollbarHeight / 2;
|
|
153
175
|
}
|
|
154
176
|
|
|
155
177
|
if (inline === 'start') {
|
|
156
|
-
inlineScroll = targetInline -
|
|
178
|
+
inlineScroll = targetInline - left - borderLeft;
|
|
157
179
|
} else if (inline === 'center') {
|
|
158
|
-
inlineScroll = targetInline - (
|
|
180
|
+
inlineScroll = targetInline - (left + width / 2) + scrollbarWidth / 2;
|
|
159
181
|
} else if (inline === 'end') {
|
|
160
182
|
inlineScroll = targetInline - right + borderRight + scrollbarWidth;
|
|
161
183
|
} else {
|
|
162
|
-
inlineScroll = alignNearest(
|
|
184
|
+
inlineScroll = alignNearest(left, right, width, borderLeft, borderRight + scrollbarWidth, targetInline, targetInline + targetWidth, targetWidth);
|
|
163
185
|
}
|
|
164
186
|
|
|
165
187
|
var scrollLeft = frame.scrollLeft,
|
|
166
188
|
scrollTop = frame.scrollTop;
|
|
167
|
-
blockScroll = Math.max(0, Math.min(scrollTop + blockScroll, frame.scrollHeight -
|
|
168
|
-
inlineScroll = Math.max(0, Math.min(scrollLeft + inlineScroll, frame.scrollWidth -
|
|
189
|
+
blockScroll = Math.max(0, Math.min(scrollTop + blockScroll, frame.scrollHeight - height + scrollbarHeight));
|
|
190
|
+
inlineScroll = Math.max(0, Math.min(scrollLeft + inlineScroll, frame.scrollWidth - width + scrollbarWidth));
|
|
169
191
|
targetBlock += scrollTop - blockScroll;
|
|
170
192
|
targetInline += scrollLeft - inlineScroll;
|
|
171
193
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
!function(t
|
|
1
|
+
!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t():"function"==typeof define&&define.amd?define(t):(e=e||self).computeScrollIntoView=t()}(this,(function(){"use strict";function e(e){return null!=e&&"object"==typeof e&&1===e.nodeType}function t(e,t){return(!t||"hidden"!==e)&&("visible"!==e&&"clip"!==e)}function n(e,n){if(e.clientHeight<e.scrollHeight||e.clientWidth<e.scrollWidth){var r=getComputedStyle(e,null);return t(r.overflowY,n)||t(r.overflowX,n)||function(e){var t=function(e){if(!e.ownerDocument||!e.ownerDocument.defaultView)return null;try{return e.ownerDocument.defaultView.frameElement}catch(e){return null}}(e);return!!t&&(t.clientHeight<e.scrollHeight||t.clientWidth<e.scrollWidth)}(e)}return!1}function r(e,t,n,r,i,o,l,d){return o<e&&l>t||o>e&&l<t?0:o<=e&&d<=n||l>=t&&d>=n?o-e-r:l>t&&d<n||o<e&&d>n?l-t+i:0}return function(t,i){var o=i.scrollMode,l=i.block,d=i.inline,u=i.boundary,f=i.skipOverflowHiddenElements,c="function"==typeof u?u:function(e){return e!==u};if(!e(t))throw new TypeError("Invalid target");for(var h=document.scrollingElement||document.documentElement,s=[],a=t;e(a)&&c(a);){if((a=a.parentNode)===h){s.push(a);break}a===document.body&&n(a)&&!n(document.documentElement)||n(a,f)&&s.push(a)}for(var p=window.visualViewport?visualViewport.width:innerWidth,m=window.visualViewport?visualViewport.height:innerHeight,g=window.scrollX||pageXOffset,w=window.scrollY||pageYOffset,v=t.getBoundingClientRect(),b=v.height,W=v.width,y=v.top,H=v.right,M=v.bottom,V=v.left,x="start"===l||"nearest"===l?y:"end"===l?M:y+b/2,E="center"===d?V+W/2:"end"===d?H:V,I=[],C=0;C<s.length;C++){var T=s[C],k=T.getBoundingClientRect(),B=k.height,D=k.width,O=k.top,R=k.right,S=k.bottom,X=k.left;if("if-needed"===o&&y>=0&&V>=0&&M<=m&&H<=p&&y>=O&&M<=S&&V>=X&&H<=R)return I;var Y=getComputedStyle(T),j=parseInt(Y.borderLeftWidth,10),L=parseInt(Y.borderTopWidth,10),N=parseInt(Y.borderRightWidth,10),q=parseInt(Y.borderBottomWidth,10),z=0,A=0,F="offsetWidth"in T?T.offsetWidth-T.clientWidth-j-N:0,G="offsetHeight"in T?T.offsetHeight-T.clientHeight-L-q:0;if(h===T)z="start"===l?x:"end"===l?x-m:"nearest"===l?r(w,w+m,m,L,q,w+x,w+x+b,b):x-m/2,A="start"===d?E:"center"===d?E-p/2:"end"===d?E-p:r(g,g+p,p,j,N,g+E,g+E+W,W),z=Math.max(0,z+w),A=Math.max(0,A+g);else{z="start"===l?x-O-L:"end"===l?x-S+q+G:"nearest"===l?r(O,S,B,L,q+G,x,x+b,b):x-(O+B/2)+G/2,A="start"===d?E-X-j:"center"===d?E-(X+D/2)+F/2:"end"===d?E-R+N+F:r(X,R,D,j,N+F,E,E+W,W);var J=T.scrollLeft,K=T.scrollTop;x+=K-(z=Math.max(0,Math.min(K+z,T.scrollHeight-B+G))),E+=J-(A=Math.max(0,Math.min(J+A,T.scrollWidth-D+F)))}I.push({el:T,top:z,left:A})}return I}}));
|