blob: 7bed27c2600b0a8f117fee3f13bb2e75c9d9c387 (
plain)
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
|
<!DOCTYPE html>
<style>
html, body, #container {
width: 100%;
height: 100%;
}
#spacer {
width: 200%;
height: 200%;
}
</style>
<div id="container">
<div id="spacer"></div>
<button>Element To Scroll</button>
</div>
<script>
window.addEventListener('message', onMessageReceived);
function scrollingElementBounds() {
var rect = document.querySelector("button").getBoundingClientRect();
return {
x: rect.x, y: rect.y, width: rect.width, height: rect.height
};
}
function onMessageReceived(e) {
if (!e.data || !e.data.type)
return;
switch(e.data.type) {
case "scroll":
document.querySelector("button").scrollIntoView({behavior: "instant"});
ackMessage({bounds: scrollingElementBounds()}, e.source);
break;
case "scrolling-element-bounds":
ackMessage({bounds: scrollingElementBounds()}, e.source);
break;
}
}
function ackMessage(msg, source) {
source.postMessage(msg, "*");
}
</script>
|
