-
Notifications
You must be signed in to change notification settings - Fork 1
/
scroll-apis.html
71 lines (71 loc) · 1.38 KB
/
scroll-apis.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
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<title></title>
<style>
html, body {
padding: 0;
margin: 0;
background: lightblue;
}
#message {
position: fixed;
bottom: 0;
right: 0;
left: 0;
height: 110px;
padding: 15px 10px;
color: white;
background: #333;
}
</style>
</head>
<body>
<div id="message"></div>
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>
<p>6</p>
<p>7</p>
<p>8</p>
<p>9</p>
<p>10</p>
<p>11</p>
<p>12</p>
<p>13</p>
<p>14</p>
<p>15</p>
<p>16</p>
<p>17</p>
<p>18</p>
<p>19</p>
<p>20</p>
<p>21</p>
<p>22</p>
<p>23</p>
<p>24</p>
<p>25</p>
<p>26</p>
<p>27</p>
<p>28</p>
<p>29</p>
<p>30</p>
<script>
window.addEventListener('scroll', function () {
var scrollingElementScrollTop = document.scrollingElement ? document.scrollingElement.scrollTop : undefined;
var msg = ''
msg += 'window.scrollY: ' + window.scrollY + '<br/>'
msg += 'window.pageYOffset: ' + window.pageYOffset + '<br/>'
msg += 'document.body.scrollTop: ' + document.body.scrollTop + '<br/>'
msg += 'document.documentElement.scrollTop: ' + document.documentElement.scrollTop + '<br/>'
msg += 'document.scrollingElement.scrollTop: ' + scrollingElementScrollTop + '<br/>'
message.innerHTML = msg
})
window.dispatchEvent(new Event('scroll'))
</script>
</body>
</html>