Skip to content

Commit ba3313c

Browse files
stipsanstipsan
authored
fix: body only counts as scrollable if documentElement is scrollable (#34)
Related scroll-into-view/scroll-into-view-if-needed#359
1 parent 55860b1 commit ba3313c

20 files changed

+544
-82
lines changed

‎.gitignore

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -69,5 +69,4 @@ dist
6969
es
7070
umd
7171
reports
72-
/index.js
73-
/types.js
72+
/index.js

‎README.md

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,8 @@
66
[![module formats: umd, cjs, and es][module-formats-badge]][unpkg-dist]
77
[![semantic-release](https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg?style=flat-square)](https://github.com/semantic-release/semantic-release)
88

9+
![compute-scroll-into-view](https://user-images.githubusercontent.com/81981/43024153-a2cc212c-8c6d-11e8-913b-b4d62efcf105.png)
10+
911
Lower level API that is used by the [ponyfill](https://ponyfill.com) [scroll-into-view-if-needed](https://github.com/stipsan/scroll-into-view-if-needed) to compute where (if needed) elements should scroll based on [options defined in the spec](https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView).
1012
Use this if you want the smallest possible bundlesize and is ok with implementing the actual scrolling yourself.
1113

‎integration/__snapshots__/body.test.js.snap

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
// Jest Snapshot v1, https://goo.gl/fbAQLP
2+
3+
exports[`document.body !== document.scrollingElement edge cases should not attempt scrolling body 1`] = `
4+
Array [
5+
Object {
6+
"el": "html",
7+
"left": 0,
8+
"top": 750,
9+
},
10+
]
11+
`;

‎integration/__snapshots__/deeply_nested_overflow.test.js.snap

Lines changed: 181 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,181 @@
1+
// Jest Snapshot v1, https://goo.gl/fbAQLP
2+
3+
exports[`scrollMode: if-needed test 0, block start, inline start 1`] = `
4+
Array [
5+
Object {
6+
"el": "div.inner-scroll-container",
7+
"left": 55.546875,
8+
"top": 55.546875,
9+
},
10+
Object {
11+
"el": "div.outer-scroll-container",
12+
"left": 300,
13+
"top": 300,
14+
},
15+
Object {
16+
"el": "html",
17+
"left": 1000,
18+
"top": 1200,
19+
},
20+
]
21+
`;
22+
23+
exports[`scrollMode: if-needed test 1, block start, inline center 1`] = `
24+
Array [
25+
Object {
26+
"el": "div.inner-scroll-container",
27+
"left": 99.96875,
28+
"top": 55.546875,
29+
},
30+
Object {
31+
"el": "div.outer-scroll-container",
32+
"left": 200,
33+
"top": 300,
34+
},
35+
Object {
36+
"el": "html",
37+
"left": 800,
38+
"top": 1200,
39+
},
40+
]
41+
`;
42+
43+
exports[`scrollMode: if-needed test 2, block start, inline end 1`] = `
44+
Array [
45+
Object {
46+
"el": "div.inner-scroll-container",
47+
"left": 144.390625,
48+
"top": 55.546875,
49+
},
50+
Object {
51+
"el": "div.outer-scroll-container",
52+
"left": 100,
53+
"top": 300,
54+
},
55+
Object {
56+
"el": "html",
57+
"left": 600,
58+
"top": 1200,
59+
},
60+
]
61+
`;
62+
63+
exports[`scrollMode: if-needed test 3, block center, inline start 1`] = `
64+
Array [
65+
Object {
66+
"el": "div.inner-scroll-container",
67+
"left": 55.546875,
68+
"top": 99.984375,
69+
},
70+
Object {
71+
"el": "div.outer-scroll-container",
72+
"left": 300,
73+
"top": 200,
74+
},
75+
Object {
76+
"el": "html",
77+
"left": 1000,
78+
"top": 1100,
79+
},
80+
]
81+
`;
82+
83+
exports[`scrollMode: if-needed test 4, block center, inline center 1`] = `
84+
Array [
85+
Object {
86+
"el": "div.inner-scroll-container",
87+
"left": 99.96875,
88+
"top": 99.984375,
89+
},
90+
Object {
91+
"el": "div.outer-scroll-container",
92+
"left": 200,
93+
"top": 200,
94+
},
95+
Object {
96+
"el": "html",
97+
"left": 800,
98+
"top": 1100,
99+
},
100+
]
101+
`;
102+
103+
exports[`scrollMode: if-needed test 5, block center, inline end 1`] = `
104+
Array [
105+
Object {
106+
"el": "div.inner-scroll-container",
107+
"left": 144.390625,
108+
"top": 99.984375,
109+
},
110+
Object {
111+
"el": "div.outer-scroll-container",
112+
"left": 100,
113+
"top": 200,
114+
},
115+
Object {
116+
"el": "html",
117+
"left": 600,
118+
"top": 1100,
119+
},
120+
]
121+
`;
122+
123+
exports[`scrollMode: if-needed test 6, block end, inline start 1`] = `
124+
Array [
125+
Object {
126+
"el": "div.inner-scroll-container",
127+
"left": 55.546875,
128+
"top": 144.421875,
129+
},
130+
Object {
131+
"el": "div.outer-scroll-container",
132+
"left": 300,
133+
"top": 100,
134+
},
135+
Object {
136+
"el": "html",
137+
"left": 1000,
138+
"top": 1000,
139+
},
140+
]
141+
`;
142+
143+
exports[`scrollMode: if-needed test 7, block end, inline center 1`] = `
144+
Array [
145+
Object {
146+
"el": "div.inner-scroll-container",
147+
"left": 99.96875,
148+
"top": 144.421875,
149+
},
150+
Object {
151+
"el": "div.outer-scroll-container",
152+
"left": 200,
153+
"top": 100,
154+
},
155+
Object {
156+
"el": "html",
157+
"left": 800,
158+
"top": 1000,
159+
},
160+
]
161+
`;
162+
163+
exports[`scrollMode: if-needed test 8, block end, inline end 1`] = `
164+
Array [
165+
Object {
166+
"el": "div.inner-scroll-container",
167+
"left": 144.390625,
168+
"top": 144.421875,
169+
},
170+
Object {
171+
"el": "div.outer-scroll-container",
172+
"left": 100,
173+
"top": 100,
174+
},
175+
Object {
176+
"el": "html",
177+
"left": 600,
178+
"top": 1000,
179+
},
180+
]
181+
`;

‎integration/__snapshots__/nested_overflow.test.js.snap

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,14 +3,14 @@
33
exports[`scrollMode: if-needed target in view, container out of view 1`] = `
44
Array [
55
Object {
6-
"el": Object {},
6+
"el": "div.container",
77
"left": 250,
88
"top": 250,
99
},
1010
Object {
11-
"el": Object {},
11+
"el": "html",
1212
"left": 1250,
13-
"top": 1000,
13+
"top": 1001,
1414
},
1515
]
1616
`;

‎integration/__snapshots__/overflow_auto.test.js.snap

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -164,7 +164,7 @@ Object {
164164
exports[`scrollMode: if-needed horizontal completely overflowing 1`] = `
165165
Array [
166166
Object {
167-
"el": Object {},
167+
"el": "div.container",
168168
"left": 200,
169169
"top": 250,
170170
},
@@ -174,7 +174,7 @@ Array [
174174
exports[`scrollMode: if-needed horizontal partially overflowing 1`] = `
175175
Array [
176176
Object {
177-
"el": Object {},
177+
"el": "div.container",
178178
"left": 200,
179179
"top": 250,
180180
},
@@ -194,7 +194,7 @@ Array [
194194
exports[`scrollMode: if-needed vertical partially below the fold 1`] = `
195195
Array [
196196
Object {
197-
"el": Object {},
197+
"el": "div.container",
198198
"left": 200,
199199
"top": 250,
200200
},

‎integration/__snapshots__/viewport.test.js.snap

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -164,7 +164,7 @@ Object {
164164
exports[`scrollMode: if-needed horizontal completely overflowing 1`] = `
165165
Array [
166166
Object {
167-
"el": Object {},
167+
"el": "html",
168168
"left": 900,
169169
"top": 950,
170170
},
@@ -174,7 +174,7 @@ Array [
174174
exports[`scrollMode: if-needed horizontal fully negative overflowing 1`] = `
175175
Array [
176176
Object {
177-
"el": Object {},
177+
"el": "html",
178178
"left": 1600,
179179
"top": 950,
180180
},
@@ -184,7 +184,7 @@ Array [
184184
exports[`scrollMode: if-needed horizontal partially negative overflowing 1`] = `
185185
Array [
186186
Object {
187-
"el": Object {},
187+
"el": "html",
188188
"left": 1600,
189189
"top": 950,
190190
},
@@ -194,7 +194,7 @@ Array [
194194
exports[`scrollMode: if-needed horizontal partially overflowing 1`] = `
195195
Array [
196196
Object {
197-
"el": Object {},
197+
"el": "html",
198198
"left": 900,
199199
"top": 950,
200200
},
@@ -204,7 +204,7 @@ Array [
204204
exports[`scrollMode: if-needed vertical completely above the fold 1`] = `
205205
Array [
206206
Object {
207-
"el": Object {},
207+
"el": "html",
208208
"left": 1200,
209209
"top": 950,
210210
},
@@ -214,7 +214,7 @@ Array [
214214
exports[`scrollMode: if-needed vertical completely below the fold 1`] = `
215215
Array [
216216
Object {
217-
"el": Object {},
217+
"el": "html",
218218
"left": 1200,
219219
"top": 950,
220220
},
@@ -224,7 +224,7 @@ Array [
224224
exports[`scrollMode: if-needed vertical partially above the fold 1`] = `
225225
Array [
226226
Object {
227-
"el": Object {},
227+
"el": "html",
228228
"left": 1200,
229229
"top": 950,
230230
},
@@ -234,7 +234,7 @@ Array [
234234
exports[`scrollMode: if-needed vertical partially below the fold 1`] = `
235235
Array [
236236
Object {
237-
"el": Object {},
237+
"el": "html",
238238
"left": 1200,
239239
"top": 950,
240240
},

‎integration/body.html

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
<!DOCTYPE html>
2+
<meta charset="utf-8">
3+
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
4+
<script src="../umd/compute-scroll-into-view.js"></script>
5+
<script src="./utils.js"></script>
6+
<style>
7+
*, *:before, *:after {
8+
box-sizing: border-box;
9+
}
10+
body {
11+
height: 100vh;
12+
overflow-y: scroll;
13+
margin: 0;
14+
}
15+
.container {
16+
margin: 200px auto;
17+
height: 200px;
18+
width: 200px;
19+
overflow: auto;
20+
}
21+
.target {
22+
background: crimson;
23+
margin-top: 100vh;
24+
height: 100px;
25+
width: 100px;
26+
}
27+
</style>
28+
<div class="container"></div>
29+
<div class="target"></div>

‎integration/body.test.js

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
beforeAll(async () => {
2+
await page.goto('http://localhost:3000/integration/body')
3+
})
4+
5+
describe('document.body !== document.scrollingElement edge cases', () => {
6+
test('should not attempt scrolling body', async () => {
7+
expect.assertions(3)
8+
const actual = await page.evaluate(() => {
9+
return window
10+
.computeScrollIntoView(document.querySelector('.target'), {
11+
scrollMode: 'always',
12+
})
13+
.map(window.mapActions)
14+
})
15+
expect(actual).toHaveLength(1)
16+
expect(actual[0]).toMatchObject({ el: 'html' })
17+
expect(actual).toMatchSnapshot()
18+
})
19+
})

0 commit comments

Comments
 (0)