-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
45 lines (42 loc) · 1.46 KB
/
index.html
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>
<html>
<body>
<style>
iframe {
width: 90%;
height: 90%;
}
#framecontainer {
width: 90vw;
height: 90vh;
place-content: center;
}
</style>
<p>This is a demo for Chrome's Concurrent Smooth scrollIntoViews feature.</p>
<p>Both the "sidebar" and the "content" scroll containers ought to scroll to when the iframe is refreshed. The feature ensures that both scrolls happen instead of one cancelling the other.</p>
<div id="framecontainer">
<div>
<button onclick="Refresh()">Refresh</button>
Pick the box number to scroll to and hit refresh.
<input id="numinput" type="number" min="1" max="14" value="14" placeholder="1-14." >
<h4 id="status">Selected box number is 14</h4>
</div>
<iframe id="frame" src="frame.html#sb14"></iframe>
</div>
<script>
const framecontainer = document.getElementById("framecontainer");
const numinput = document.getElementById("numinput");
const status = document.getElementById("status");
function Refresh() {
let frame = document.getElementById("frame");
frame.remove();
frame = document.createElement("iframe");
frame.id = "frame";
const num = numinput.value;
frame.src = `frame.html#sb${num}`;
framecontainer.append(frame);
status.innerText = `Selected box number is ${num}`;
}
</script>
</body>
</html>